状況
ユーザーがドロップダウン リストで値を選択でき、データがグラフに読み込まれるグラフを作成しています。amCharts の Web サイトで同様の例を見つけました。https://www.amcharts.com/kbase/dynamically-loading-chart-datasets/
この例の問題は、データが「ハードコーディング」されているため、各オプションについて、事前に構築されたリンクである必要があることです。
私がやった事
これまでのところ、私はチャートを機能させ、渡された「アイテム」に応じて 3 つのステータスをカウントするコントローラーを作成しました。
ただし、私の item_name 変数は常に null です。
public ActionResult checkPriority(string item_name)
{
decimal?[] priCount = { 0, 0, 0 };
priCount[0] = db.vw_priCount.Where(i => i.itemDescrip == item_name&& i.itemStatus == 1).Count();
priCount[1] = db.vw_priCount.Where(i => i.itemDescrip == item_name&& i.itemStatus == 2).Count();
priCount[2] = db.vw_priCount.Where(i => i.itemDescrip == item_name&& i.itemStatus == 3).Count();
return Json(priCount, JsonRequestBehavior.AllowGet);
}
これは私のインデックスページのコードです
<script>
var chart;
$(document).ready(function () {
$.ajax({
type: "POST",
url: '/Home/checkPriority',
data:{
item_name: "Pens"
},
dataType: "json",
success: OnSuccessBoxCountPri,
error: OnErrorCallPri
});
});
function OnErrorCallPri(response) {
alert('An error occured with the charts, please try again later.');
}
function OnSuccessBoxCountPri(priCount) {
console.log(priCount);
chart = AmCharts.makeChart("pribarchartdiv", {
"type": "serial",
"theme": "none",
"marginRight": 70,
"dataProvider": [{
"Priority Level": "Low",
"cost": priCount[0],
"color": "#FF0F00"
}, {
"Priority Level": "Medium",
"cost": priCount[1],
"color": "#FF6600"
}, {
"Priority Level": "High",
"cost": priCount[2],
"color": "#FF9E01"
}, {
"Priority Level": "Very High",
"cost": priCount[3],
"color": "#04D215"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Priority"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "cost"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "Priority Level",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
}
function setDataSet(dataset_url) {
AmCharts.loadFile("checkPriority",{}, function (data) {
console.log(dataset_url);//itemname in here
console.log(data);//0,0,0
chart.dataProvider = AmCharts.parseJSON(data);
chart.validateData();
});
}
</script>
<p class="selector">
<select onchange="setDataSet(this.options[this.selectedIndex].value);">
<option value="Pens">Data Set #1</option>
<option value="Chalk">Data Set #2</option>
<option value="Books">Data Set #3</option>
</select> < Select a data set
</p>
これは、AmCharts.loadFile("checkPriority",{}, function (data) {
変数 (チェックボックスの値) を渡す必要のある行だと思います。これを行う方法について、もしそれが可能かどうかについてのアドバイスは、ありがたいです。
AmCharts.loadFile
は、GET リクエストを実行する dataLoader プラグインによって提供される AJAX メソッドです。ドキュメントに示されているように、最初のパラメーターはエンドポイントへの URL であるため、最初のパラメーターとして有効な URL を渡す必要があります。
エンドポイントはデータを取得するために POST を必要とするため、loadFile メソッドを使用する代わりに、独自の AJAX 呼び出しを使用することをお勧めします。例えば:
function setDataSet(dataset) {
$.ajax({
type: "POST",
url: '/Home/checkPriority',
data:{
item_name: dataset
},
dataType: "json",
success: function(data) {
chart.dataProvider = data;
/* or if you need to set each element individually like in your makeChart call:
chart.dataProvider = [{
"Priority Level": "Low",
"cost": data[0],
"color": "#FF0F00"
}, {
"Priority Level": "Medium",
"cost": data[1],
"color": "#FF6600"
}, {
"Priority Level": "High",
"cost": data[2],
"color": "#FF9E01"
}, {
"Priority Level": "Very High",
"cost": data[3],
"color": "#04D215"
}];
*/
chart.validateData();
},
error: OnErrorCallPri
});
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加