渲染高图后能够显示选中的系列标签

时间:2018-10-22 11:19:22

标签: javascript function checkbox highcharts

我设法建立了一个高图,通过复选框可以显示序列的值,如果复选框处于选中状态,但是现在我想例如在渲染后立即选择(选中)第一个意甲,而其余的则未被选中

之后的默认值
this.chart =  new Highcharts.Chart(chartConf);
this.chart.series[0].selected = true;

但是,即使value为true复选框也保持未选中状态,是否有任何方法可以将默认情况下,仅将第一个意甲默认为true,而将其余部分保持为未选中状态?

$(function () {
    var chart;

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'line',

                marginRight: 130,

                marginBottom: 25

            },
            plotOptions: {
                    series: {
             						 dataLabels: {
               								 enabled: false
              					}
           					 },
        		line: {
            
                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; 
		                        	}
                     
                		},
         
                   
           		},
            	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]

            }]

        });

    });

    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>



<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

1 个答案:

答案 0 :(得分:1)

您可以在第一个系列选项中使用selected: true,如下所示:

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],
    selected: true // Here is the trick
        }, {
            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]} // Continue rest of your code

这是您的工作版本

$(function () {
    var chart;

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'line',

                marginRight: 130,

                marginBottom: 25

            },
            plotOptions: {
                    series: {
             						 dataLabels: {
               								 enabled: false
              					}
           					 },
        		line: {
            
                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; 
		                        	}
                     
                		},
         
                   
           		},
            	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],
        selected: true // Here is the trick

            }, {

                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]

            }]

        });

    });

    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>



<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>


编辑

在您的情况下,一个技巧是使用图表的load函数,并且在该回调函数内部触发您所需的复选框click事件,如下所示:

events:{
  load: function () {
    let chs = $(".highcharts-legend-checkbox");
    if (chs && chs.length>0) chs[0].click();
  }
}

这是您的工作代码

$(function () {
    var chart;

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'line',

                marginRight: 130,

                marginBottom: 25,
                events:{
                      load:function(){
                          let chs = $(".highcharts-legend-checkbox");
                          if (chs && chs.length>0) chs[0].click();
                      }
                }

            },
            plotOptions: {
                    series: {
             						 dataLabels: {
               								 enabled: false
              					}
           					 },
        		line: {
            
                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; 
		                        	}
                     
                		},
         
                   
           		},
            	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]

            }]

        });

    });

    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>



<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>