我有以下代码,我想一次显示单个系列数据。一旦任何用户点击蛋白质和其他系列数据,如果显示是隐藏的。当我点击两个图例并显示两个系列数据但我想显示单个系列数据,而不是显示我点击的所有内容时。当点击另一个图例时,之前选择的数据隐藏。
$(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}]
});
});