Question

我有一个显示燃料类型的图表。我想根据用户个人资料隐藏某些燃料类型。 if语句是一个示例，因为它是我无法使用的JS。我希望这可以隐藏名为CNG的系列的图例，但什么也没发生。我要去哪里错了？

if( user profile does not include fuel type CNG ) : ?>
<script type='text/javascript'>
    $(function () {
        $('#container').highcharts({

            series: [{
                name: ['CNG'],
                showInLegend: false
            }]        
        });    
    });
</script>
<?php endif;

Answer 1

如果您希望在图表初始化时从图例中隐藏系列，就像您编写的那样：

series: {
  showInLegend: false,
  ...
}

如果要在图表初始化后从图例中隐藏系列，则必须使用chart.update或chart.series[index].update，其中图表是包含highchart对象的变量。像这样：

chart.series[0].update({
    showInLegend: false
  }, true, false);

这将隐藏第一个意甲的传奇。

var chart = Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        showEmpty: false
    },

    yAxis: {
        showEmpty: false
    },

    series: [{
    	name: 'First series',
        data: [15,41,13,31,104,124,29,55,63,71],
    }, {
    	name: 'Second series',
      data: [14,51,123,31,134,123,23,5,6,7]
    }]
});


// Toggle names
let toggle = true;
$('#legend').click(function () {
	if(toggle) {
    chart.series[0].update({
        showInLegend: false
    }, true, false);
    
    toggle = false;
    }
    else {
    chart.series[0].update({
        showInLegend: true
    }, true, false);
    
    toggle = true;
    }
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 150px"></div>

<button id="legend">Toggle legend</button>

工作示例： http://jsfiddle.net/ewolden/vkdcs79x/

使用jQuery来获取highcharts对象可以这样完成：

$('#container').highcharts().series[0].update({
  showInLegend: false
}, true, false);

要在图表加载后触发更新，可以使用以下方法：

$('#container').ready(function() {
  $('#container').highcharts().series[0].update({
    showInLegend: false
  }, true, false);
})

工作示例： http://jsfiddle.net/ewolden/vkdcs79x/9/

隐藏在海图图例中的项目

1 个答案: