Скрыть или отключить легенду или метку в конце строки 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;?>
                                  ]
                        }]
                    });

Я должен попробоватьНесколько способов, которые можно найти в статье или посте из stackoverflow, но до сих пор никто не соответствует моему требованию.

Спасибо в Advanced.

С уважением,

Answer 1

Я не могу комментировать ваш пост из-за репутации, поэтому просто отвечу на него.Я предполагаю, что вы, вероятно, включили файл " series-label.js " где-то в ваш основной код, и по умолчанию метки появляются.У вас есть два варианта:

1- Найти и удалить строку кода, в которую вы включили файл " series-label.js ".Это выглядит примерно так:

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

2 - Вы можете вручную отключить метки серий, используя опцию метки в блоке plotOptions.series.В вашем коде, изменяя этот раздел, он выглядит примерно так: (примечание метка раздел, где включено: 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
         }
     }
 },

РЕДАКТИРОВАТЬ: Я добавил простую демонстрацию для второго решения.Часть, касающаяся отключения меток, прокомментирована, поэтому метки отображаются в серии диаграмм.Если вы закомментируете эту часть, ярлыки не будут показаны.

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