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

Question

如何隐藏或禁用 Highcharts 行末尾的图例或标签，而不是图表外的图例？请参阅下面标有红色的我的图片。

这是我的代码：

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. 您可以使用块label中的选项手动禁用系列标签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
            }
        }
    },
   

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

演示： http: //jsfiddle.net/n95Lb6fm/