Question

我有以下代码，我想一次显示单个系列数据。一旦任何用户点击蛋白质和其他系列数据，如果显示是隐藏。当我点击两个图例并显示两个系列数据但是我想要显示单个系列数据时，不显示我点击的所有内容。当点击另一个图例时，之前的选择数据会隐藏。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',

            zoomType: 'x'
        },
        title: {
            text: 'CALORIES & NUTRIENTS OVER TIME',
            x: -20 //center
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Drag your finger over the plot to zoom in'
        },
        xAxis: {
            categories: ["10\/11\/13","09\/27\/13","09\/14\/13","09\/13\/13","09\/04\/13","08\/29\/13","08\/28\/13","08\/22\/13","08\/21\/13"],

            labels: {
                align: 'center',
                x:5,
                y: 40,
                rotation: 270,
                    style: {
                color: '#002060',
                fontWeight:'bold'
                    }
            }
        },
        yAxis: {
                min: 0,
                tickInterval: 500,
            title: {
                text: 'Average Intake'

            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:8px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        legend: {
             title: {
                text: 'Nutrients<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Click to View)</span>',
                style: {
                    fontStyle: 'italic'
                }
            },
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        credits: {
            enabled: false
        },
        series: [{name:"Calories",data:[583,567,2694,1628,1628,169,815,1628,1628],visible:true},{name:"Protein",data:[23,19,1,2,2,11,30,2,2],visible:false},{name:"Fat",data:[6,4,306,184,184,10,22,184,184],visible:false},{name:"Fiber",data:[17,17,0,0,0,4,21,0,0],visible:false},{name:"Carbohydrate",data:[122,123,0,0,0,10,133,0,0],visible:false},{name:"Sugar",data:[0,0,0,0,0,3,3,0,0],visible:false},{name:"Vit C",data:[0,0,0,0,0,32,32,0,0],visible:false},{name:"Vit A",data:[0,0,2583,1553,1553,544,609,1553,1553],visible:false},{name:"Vit E",data:[0,0,9,5,5,3,3,5,5],visible:false},{name:"Vit D",data:[0,0,6,3,3,0,0,3,3],visible:false}]
    });
});

Answer 1

我建议熟悉legendItemClcik动作，它允许控制点击事件。

http://api.highcharts.com/highstock#plotOptions.series.events.legendItemClick

如果您需要点击点/系列上的操作，则需要使用http://api.highcharts.com/highstock#plotOptions.series.point.events.click

在高图表列图中一次显示一个系列数据

1 个答案: