1

次のコードがあり、一度に単一のシリーズデータを表示したい. ユーザーがタンパク質をクリックすると、表示されている場合は非表示になります。2つの凡例をクリックして両方のシリーズデータが表示されているが、クリックしたものすべてを表示するのではなく、単一のシリーズデータを表示したい場合。また、別の凡例をクリックすると、前の選択データが非表示になります。

$(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}]
    });
});
4

1 に答える 1

0

コントロール クリック イベントを許可する legendItemClcik アクションに慣れることをお勧めします。

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

ポイント/シリーズでアクションをクリックする必要がある場合は、http://api.highcharts.com/highstock#plotOptions.series.point.events.clickを使用する必要があります

于 2013-10-31T12:19:21.470 に答える