我有一个容器,一个饼图,我想改变数据显示基于一个下拉作用:JavaScript,Highcharts - 通过下拉菜单更改图表数据?
<select class="selectHeaderMobile large-1 behaviourForm" id = "list">
<option value="">Select Metric</option>
<option value="A">Difficulty</option>
<option value="B">Interest</option>
</select>
<button class="button smallMobile show-for-all" type="button" id="change">Apply</button>
的Javascript:
<script>
$(function() {
var options { // Build the chart
chart: {
type: 'pie',
renderTo: 'feedback1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Difficulty'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
showInLegend: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
name: 'Difficulty',
data: <%= @get_difficulty_pie.to_json %>
}]
};
var chart = new Highcharts.chart(options);
$("#list").on('change', function(){
//alert('f')
var selVal = $("#list").val();
if(selVal == "A" || selVal == '')
{
options.series = [{name: 'Difficulty', data: <%= @get_difficulty_pie.to_json %> }]
}
else if(selVal == "B")
{
options.series = [{name: 'Interest', data: <%= @get_interest_pie.to_json %>}]
}
chart = Highchart.chart(options);
});
)};
</script>
数据正在返回,但什么都不显示表明语法错误的地方,但我不知道,我不能测试下拉。
页来源:
series: [{
name: 'Difficulty',
data: [4,2,1,6,3,3,1,6,4,5,2,6]
},
var chart = new Highcharts.Chart(options);
$("#list").on('change', function(){
//alert('f')
var selVal = $("#list").val();
if(selVal == "A" || selVal == '')
{
options.series = [{name: 'Difficulty', data: [4,2,1,6,3,3,1,6,4,5,2,6] }]
}
else if(selVal == "B")
{
options.series = [{name: 'Interest', data: [4,3,null,3,null,3,4,6,6,3,5,5]}]
}
var chart = new Highcharts.Chart(options);
});
有什么建议?谢谢。
请在JSFiddle或Plnkr中重新创建您的问题。 – mcranston18
嗨@ mcranston18,这正是我期望实现的:http://jsfiddle.net/WDcL4/如果有帮助。我遵循这个例子。 – Co2
https://jsfiddle.net/CO22/L03tdkf9/3/这里是我的... – Co2