如何使用PlotLines仅用于向下钻取选项？

Question

我使用过刻录高图的专栏。

及其深入研究

我在深入研究中得到了正确的输出，但我不希望PlotLine在第一张图片中可见。我该如何解决这个问题？

 $(document).ready(function () { });
 angular.module('myModule', []).service("AttendanceService", function ($http) {
        this.getdata = function () {
            return $http({
                method: "post",
                url: "GetAttendanceReport",
                params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
                dataType: "json"
            });
        };
    }).controller('myController', function ($scope,AttendanceService) {
      GetAlldata();
        function GetAlldata() {
            var getAttendanceData = AttendanceService.getdata();
            getAttendanceData.then(function (Attendances) {
                Highcharts.chart('container', {
                  chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Attendance Report' + ' ' + $("#YearIn option:selected").text()
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: 'Total Attendance Recorded'
                        },
                           plotLines: [{
                            value: 8,
                            color: '#ff0000',
                            width: 2,
                            zIndex: 4,
                            label: { text: 'goal' },
                        }],
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y:.2f}'
                            }
                        }
                    },

                    tooltip: {
                        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}mins</b> of total<br/>'
                    },

                    series: [{
                        name: 'Attendance',
                        colorByPoint: true,
                        data: [{
                            name: 'Jan',
                            y: Attendances.data.YearlyReport[0],
                            drilldown: 'Jan'
                        }, {
                            name: 'Feb',
                            y: Attendances.data.YearlyReport[1],
                            drilldown: 'Feb'
                        }, {
                            name: 'March',
                            y: Attendances.data.YearlyReport[2],
                            drilldown: 'March'
                        }, {
                            name: 'April',
                            y: Attendances.data.YearlyReport[3],
                            drilldown: 'April'
                        }, {
                            name: 'May',
                            y: Attendances.data.YearlyReport[4],
                            drilldown: 'May'
                        }, {
                            name: 'June',
                            y: Attendances.data.YearlyReport[5],
                            drilldown: 'June'
                        }, {
                            name: 'July',
                            y: Attendances.data.YearlyReport[6],
                            drilldown: 'July'
                        }, {
                            name: 'Aug',
                            y: Attendances.data.YearlyReport[7],
                            drilldown: 'Aug'
                        }, {
                            name: 'Sep',
                            y: Attendances.data.YearlyReport[8],
                            drilldown: 'Sep'
                        }, {
                            name: 'Oct',
                            y: Attendances.data.YearlyReport[9],
                            drilldown: 'Oct'
                        }, {
                            name: 'Nov',
                            y: Attendances.data.YearlyReport[10],
                            drilldown: 'Nov'
                        }, {
                            name: 'Dec',
                            y: Attendances.data.YearlyReport[11],
                            drilldown: 'Dec'
                        }]
                    }],
                    drilldown: {
                        series: 
                            [{
                            name: 'Jan',
                            id: 'Jan',
                            data: [
                                [
                                    '1',
                                    parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1])

                                ],
                                [
                                    '2',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2])
                                ],
                                [
                                    '3',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3])
                                ],
                                [
                                    '4',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 4])
                                ],
                                [
                                    '5',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 5])
                                ],
                                [
                                    '6',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 6])
                                ],
                                [
                                    '7',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 7])
                                ],
                                [
                                    '8',
                                   parseFloat(Attendances.data.MonthlyReport[1 * 33 + 8])
                                ],
                                [
                                    '9',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 9])
                                ],
                                [
                                    '10',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 10])
                                ],
                                [
                                    '11',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 11])
                                ],
                                [
                                    '12',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 12])
                                ],
                                [
                                    '13',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 13])
                                ],
                                [
                                    '14',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 14])
                                ],
                                [
                                    '15',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 15])
                                ],
                                [
                                    '16',
                                    parseFloat(Attendances.data.MonthlyReport[1 * 33 + 16])
                                ],
                                [
                                    '17',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 17])
                                ],
                                [
                                    '18',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 18])
                                ],
                                [
                                    '19',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 19])
                                ],
                                [
                                    '20',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 20])
                                ],
                                [
                                    '21',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 21])
                                ],
                                [
                                    '22',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 22])
                                ],
                                [
                                    '23',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 23])
                                ],
                                [
                                    '24',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 24])
                                ],
                                [
                                    '25',
                                      parseFloat(Attendances.data.MonthlyReport[1 * 33 + 25])
                                ],
                                [
                                    '26',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 26])
                                ],
                                [
                                    '27',
                                    parseFloat(Attendances.data.MonthlyReport[1 * 33 + 27])
                                ],
                                [
                                    '28',
                                    parseFloat(Attendances.data.MonthlyReport[1 * 33 + 28])
                                ],
                                [
                                    '29',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 29])
                                ],
                                 [
                                    '30',
                                    parseFloat(Attendances.data.MonthlyReport[1 * 33 + 30])
                                 ],
                                 [
                                    '31',
                                         parseFloat(Attendances.data.MonthlyReport[1 * 33 + 31])
                                 ]
                            ]},and so on]
                    }
                });
            }, function () {
                alert('Error in getting records');
            });

        } $("#btnLoad").click(function (event) {
            GetAlldata();
        });
        $("#btnBack").click(function (event) {
            window.location.href = "homepage";
        });
    });

这是我用过的完整代码。

Answer 1

您在remove或add进行操作时可动态down和up plotLine。

示例：http://jsfiddle.net/a5yzsarx/

$(function() {
  $('#container').highcharts({
    chart: {
      events: {
        drilldown: function() {
          this.xAxis[0].removePlotLine('p1');
        },
        drillup: function() {
          this.xAxis[0].addPlotLine({
            id: 'p1',
            value: 8,
            color: '#ff0000',
            width: 2,
            zIndex: 4,
            label: {
              text: 'goal'
            }
          });
        }
      }
    },
    series: [{
      type: 'column',
      data: [{
        y: 42,
        drilldown: 's2'
      }]
    }],
    drilldown: {
      series: [{
        id: 's2',
        data: [1, 2, 3]
      }]
    },
    yAxis: {
      plotLines: [{
        id: 'p1',
        value: 8,
        color: '#ff0000',
        width: 2,
        zIndex: 4,
        label: {
          text: 'goal'
        }
      }]
    }
  });
});