隐藏或禁用图例末尾的图例或标签

Question

如何隐藏或禁用Highcharts行尾而不是图表外部图例的图例或标签？看到下面的我的照片标有红色。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9TZEU4Ri5wbmcifQ==” alt =“折线图，键入样条线”>

这是我的代码：

Highcharts.chart('container1', {
    chart: {
        scrollablePlotArea: {
            minWidth: 700
        }
    },
    title: {
        text: ['Grafik Pencapaian  <?php echo $title1 ?> (%)' ]
    },
    subtitle: {
        text: 'Preventive Maintenance PM-03: (Tanggal : <?php echo $start ?> s/d <?php echo $end ?>)</a>'
    },
    xAxis: {
        //tickInterval: 7 * 24 * 3600 * 1000, // one week
        tickWidth: 0,
        gridLineWidth: 1,
        labels: {
            align: 'center',
            y: 10
        },
        categories: [
                <?php 
                foreach ($chart as $key => $x_axis ) : 
                        echo "'".$x_axis->tanggal."',";
                endforeach; 
                ?>
                ]
    },
    yAxis: [{ // left y axis
        title: {
            text: null
        },
        labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }, { // right y axis
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title: {
            text: null
        },
        labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }],
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: true
        },
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function (e) {
                        hs.htmlExpand(null, {
                            pageOrigin: {
                                x: e.pageX || e.clientX,
                                y: e.pageY || e.clientY
                            },
                            headingText: this.series.name,
                            maincontentText: this.y + ' %',
                            width: 200
                        });
                    }
                }
            },
            marker: {
                lineWidth: 1
            }
        }
    },
    legend: {
        align: 'left',
        verticalAlign: 'top',
        borderWidth: 0
    },
    tooltip: {
        shared: true,
        crosshairs: true
    },
    series: [{
        name: 'Selesai <?php echo $title1 ?> (%)',
        color : '#83f442',
        dataLabels: {
                enabled: true,
                y: 25,
                color : '#488426',
                format: '{y} % <br/>',
                showInLegend: false
            },
        data: [
                <?php 
                foreach ($chart as $key => $series ) : 
                        echo number_format( $series->actual/$series->plan , 4, '.', '')*100 .",";
                endforeach;?>
              ]
    }, {
        name: 'Year To Date <?php echo $title1 ?> (%)',
        color : '#a02cb2',
        dataLabels: {
                enabled: true,
                y: 40,
                color : '#a02cb2',
                format: '{y} % <br/>',
                showInLegend: false
            },
        data: [
                <?php 
                $cum_plan = 0;
                $cum_actual = 0;
                foreach ($chart as $key => $series ) : 
                        $cum_plan = $cum_plan + $series->plan;
                        $cum_actual = $cum_actual + $series->actual;
                        echo number_format( $cum_actual/$cum_plan , 4, '.', '')*100 .",";
                endforeach;?>
              ]
    }, {
        name: 'Target <?php echo $title1 ?> (%)',
        color : '#ffaaaa',
        dataLabels: {
                enabled: true,
                y: -10,
                color : '#ffaaaa',
                format: '{y} % <br/>',
                showInLegend: false
            },
        data: [
                <?php 
                foreach ($chart as $key => $series ) : 
                        echo number_format( $series->plan/$series->plan , 4, '.', '')*100 .",";
                endforeach;?>
              ]
    }]
});

Answer 1

由于声誉我无法对您的帖子发表评论，所以我会回答。我假设您可能在主代码中的某个位置包含了“ series-label.js”文件，并且默认情况下会使标签出现。您在这里有两个选择：

1-查找并删除包含“ [series-label.js”文件的代码行。它看起来像这样：

<script src="https://code.highcharts.com/modules/series-label.js"></script>

2-您可以使用plotOptions.series块中的标签选项手动禁用系列标签。通过修改本节的代码，它看起来像这样：（请注意label部分，其中enabled：false]

plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        },
        enableMouseTracking: true
    },
    series: {
        cursor: 'pointer',
        label: {
             enabled: false
        }
        point: {
             events: {
                 click: function (e) {
                      hs.htmlExpand(null, {
                           pageOrigin: {
                                 x: e.pageX || e.clientX,
                                 y: e.pageY || e.clientY
                           },
                           headingText: this.series.name,
                           maincontentText: this.y + ' %',
                           width: 200
                      });
                 }
             }
         },
         marker: {
             lineWidth: 1
         }
     }
 },

EDIT：我为第二个解决方案添加了一个简单的演示。注释了有关禁用标签的部分，因此标签显示在图表系列中。如果您注释掉该部分，则不会显示标签。

DEMO： http://jsfiddle.net/n95Lb6fm/