可能重复:
Dynamic Flot graph - show hide series by clicking on legend text or box on graph
我正在使用JQPlot,如果在图例中点击了线条,我就会隐藏线条。
这是我的代码:
var plotCustomerSurveyGraph = $.jqplot('CustomerSurveyLineGraph', [[0,1,3,2,3,0,1,3,1,2,3,1,2], [1,2,3,1,1,2,2,3,3,1,2,1,2], [1,2,3,4,4,3,2,2,1,4,3,2,2], [0,1,3,3,1,2,2,1,1,0,0,1,2],[2,2,3,3,4,4,0,2,0,1,1,3,3], [2,2,3,3,1,1,0,1,0,2,3,3,1], [1,3,1,4,3,3,1,2,3,4,1,2,1], [2,1,3,2,1,2,0,1,2,4,2,1,0]],
{
axes:
{
xaxis:
{
label: "Date (Week)",
ticks: ['1','2','3','4','5','6','7','8','9','10','11','12','13']
},
yaxis:
{
label: 'Rating',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
ticks: ['0','1','2','3']
}
},
title:'Customer Survey (Last 3 Months)',
width: 480, height: 480,
legend:{show:true, location: 'e', placement: 'outsideGrid'},
seriesDefaults:
{
rendererOptions: {smooth: true}
},
series:[
{
lineWidth:1,
label:'Staff Appearance',
markerOptions: { size:7, style:'dimaond' }
},
{
lineWidth:1,
label:'Staff Product Knowledge',
markerOptions: { size: 7, style:"dimaond" }
},
{
lineWidth:1,
label:'Staff Friendliness',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Staff Wait Time Acceptable',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Food Value For Money',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Overall Quality of Meal',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Cleanliness of the Premises',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Ambience and Atmosphere of the Premises',
markerOptions: { size:7, style:"filledSquare" }
}
]
}
);
这是图表的图像:
是否可以启用要素隐藏/显示线条,具体取决于它们是否已在图例中单击?如果是这样,我可以帮忙做一下吗?
由于
答案 0 :(得分:9)
试试这个
在代码中添加renderer: $.jqplot.EnhancedLegendRenderer
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
location: 'e',
showSwatches: true,
placement: 'outsideGrid'
}