Question

我正在处理图表，我的目标是能够隐藏或显示图表上的值，并且我已经实现了这一目标，但是不幸的是，隐藏值时未取消选中我的复选框，或在显示它们时未选中它。我不确定我在做什么错。有人有什么建议吗？我很确定没有必要操纵dom，因为庞大的图书馆中的高位图可能有针对这种特定情况的信息。

这是我正在研究的jsfiddle

`

$(function () {
var chart;
$(document).ready(function() {

    chart = new Highcharts.Chart({

        chart: {

            renderTo: 'container',

            type: 'line',

            marginRight: 130,

            marginBottom: 25

        },
        plotOptions: {
                series: {
                                 dataLabels: {
                                         enabled: true
                            }
                         },
            line: {

            events: {
                checkboxClick: function (event){

                 if(event.checked)
                                {

                                 var enabled = !this.options.dataLabels.enabled;
                    this.update({
                        dataLabels:{
                            enabled: enabled
                        }
                    });

               return false; 
                                }
                            else{
                                 var a = !this.options.dataLabels.enabled;
                    this.update({
                        dataLabels:{
                            enabled: a
                        }
                    });

               return true; 
                                }

                    },


            },
            showInLegend: true,
           showCheckbox: true
         }
        },                
        title: {

            text: 'Monthly Average Temperature',

            x: -20 //center

        },

        subtitle: {

            text: 'Source: WorldClimate.com',

            x: -20

        },

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },

        yAxis: {

            title: {

                text: 'Temperature (°C)'

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: '#808080'

            }]

        },

        tooltip: {

            formatter: function() {

                    return '<b>'+ this.series.name +'</b><br/>'+

                    this.x +': '+ this.y +'°C';

            }

        },

        legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'top',

            x: -10,

            y: 100,

            borderWidth: 0

        },


        series: [{

            name: 'Tokyo',

            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

        }, {

            name: 'New York',

            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

        }, {

            name: 'Berlin',

            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

        }, {

            name: 'London',

            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

        }]

    });

});

});`

http://jsfiddle.net/LDMAQ/1088/

Answer 1

首先：将dataLabels启用设置为false。现在，数据将不会在开始时显示。（这是可选的）

  plotOptions: {
        series: {
            dataLabels: {
                enabled: false
            }
        },

第二：如果通过将enabled设置为true enabled: true来选中复选框，则启用标签。如果选中此复选框，请确保返回true。如果未选中此复选框，则将其设置为false并返回false。

events: {
        checkboxClick: function(event) {

            if (event.checked) {
                var enabled = !this.options.dataLabels.enabled;
                this.update({
                    dataLabels: {
                        enabled: true
                    }
                });

                return true;
            } else {
                var a = !this.options.dataLabels.enabled;
                this.update({
                    dataLabels: {
                        enabled: false
                    }
                });

                return false;
            }

        },

JSFiddle：http://jsfiddle.net/LDMAQ/1095/

Checkbox拒绝在highchart上选中或取消选中

1 个答案: