0
ハイチャートjsを初めて使用しています。データシリーズを選択してグラフに表示されたデータを変更できる棒グラフを作成しようとしていますドロップダウンリストから選択します。私のコードは以下の通りです。グラフはうまくグラフが表示されていますが、ドロップダウンリストに応答していません。ドロップダウンリストを使用してハイチャートのデータシリーズを変更する方法
var dataOptions = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Word Count'
},
subtitle: {
text: 'Data input from CSV'
},
data: {
csv: document.getElementById('one').innerHTML
},
plotOptions: {
column: {
stacking: 'normal',
marker: {
enabled: false
}
}
},
series: [{
lineWidth: 1
}, {
color: '#c4392d',
negativeColor: '#5679c4',
fillOpacity: 0.5
}]
}
var chart = new Highcharts.Chart(dataOptions);
$("#chartType").change(function() {
var selVal = $("#chartType").val();
if (selVal == '0' || selVal == 'one') {
data: {
csv: document.getElementById('one').innerHTML
}
}
else {
data: {
csv: document.getElementById('two').innerHTML
}
}
var chart = new Highcharts.Chart(dataOptions);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<select id="chartType">
<option value="0">-select meeting number-</option>
<option value="one">1st meeting of year</option>
<option value="two">2nd meeting of year</option>
</select>
<button id="change">Refresh Table</button>
<div id="container" style="min-width: 620px; max-width:880px; height: 400px; margin: 0 auto;" class="ChartBox"></div>
<pre id="one" style="display:none">Year,Consensus,Most,Many,Some,Several,A_Number_Of,Few,Couple_Two,One,Total_Counting_Words,Total_Word_Count
2003,15,0,0,3,0,3,1,0,0,22,
2004,17,0,2,4,1,2,3,0,1,30,
2005,6,0,0,0,0,0,0,0,0,6,
2006,3,0,0,2,0,0,0,0,0,5,
2007,7,0,0,0,0,0,0,0,0,7,
2008,7,2,0,1,0,0,0,0,0,10,
2009,5,0,0,0,1,0,0,0,1,7,
2010,11,0,0,0,0,0,0,0,1,12,
2011,7,0,0,0,0,0,2,0,0,9,
2012,7,0,0,1,1,0,1,0,1,11,
2013,10,0,0,1,0,0,0,0,2,13,
2014,15,0,1,0,0,0,0,0,0,16,
2015,14,0,0,0,0,0,0,0,0,14,
2016,11,0,1,1,0,0,0,1,0,14,</pre>
<pre id="two" style="display:none">Year,Consensus,Most,Many,Some,Several,A_Number_Of,Few,Couple_Two,One,Total_Counting_Words,Total_Word_Count
2003,15,0,0,3,0,3,1,0,0,40,
2004,17,0,2,4,1,2,3,0,1,29,
2005,6,0,0,0,0,0,0,0,0,20,
2006,3,0,0,2,0,0,0,0,0,20,
2007,7,0,0,0,0,0,0,0,0,7,
2008,7,2,0,1,0,0,0,0,0,10,
2009,5,0,0,0,1,0,0,0,1,7,
2010,11,0,0,0,0,0,0,0,1,12,
2011,7,0,0,0,0,0,2,0,0,9,
2012,7,0,0,1,1,0,1,0,1,11,
2013,10,0,0,1,0,0,0,0,2,13,
2014,15,0,1,0,0,0,0,0,0,16,
2015,14,0,0,0,0,0,0,0,0,14,
2016,11,0,1,1,0,0,0,1,0,14,</pre>
変更イベント時にデータを誤って変更するため、動作しません。あなたのcsvオブジェクトをdataOptions.dataに割り当てる必要があります - example http://jsfiddle.net/wg5jafqt/3/ – morganfree
はい、これは私の問題を解決します。ありがとうございました！ – user8189654