我需要創建一個包含兩個串列的圖表。
List<string> islemYapanOperatorler = new List<string>();
List<int> interventionCounter = new List<int>();
foreach (var item in itemList)
{
string Normalize = item.Key;
for (int i = 0; i < turkishChars.Length; i )
Normalize = Normalize.Replace(turkishChars[i], englishChars[i]);
islemYapanOperatorler.Add(Normalize);
foreach (var item2 in item)
{
interventionCount ;
}
interventionCounter.Add(interventionCount);
interventionCount = 0;
operatorCount ;
}
islemYapanOperatorler 串列創建標簽部分，interventioncounter 串列創建 Chart.Js 的資料部分。
下面是 Chart.js 的 javascript 代碼：（它有點懶，但它給出了我想要的結果。）
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels:
['@islemYapanOperatorler[0]', '@islemYapanOperatorler[1]', '@islemYapanOperatorler[2]', '@islemYapanOperatorler[3]', '@islemYapanOperatorler[4]', '@islemYapanOperatorler[5]', '@islemYapanOperatorler[6]', '@islemYapanOperatorler[7]', '@islemYapanOperatorler[8]', '@islemYapanOperatorler[9]', '@islemYapanOperatorler[10]']
,
datasets: [{
label: 'Haftal?k',
data: [@interventionCounter[0], @interventionCounter[1], @interventionCounter[2], @interventionCounter[3], @interventionCounter[4], @interventionCounter[5], @interventionCounter[6], @interventionCounter[7], @interventionCounter[8], @interventionCounter[9], @interventionCounter[10]],
backgroundColor: [
'rgba(0, 26, 190, 0.8)'
],
borderColor: [
'rgba(0, 26, 190, 1)'
],
borderWidth: 1
}
]
},
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return data['labels'][tooltipItem['index']] ': ' data['datasets'][0]['data'][tooltipItem['index']] ;
}
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
它作業正常并給出了我想要的結果。（下圖）
但是，如你所見
它適用于 11 個索引，但這個索引數量可能會有所不同。在這種情況下，要么它不顯示第 12 個索引中的資料，因為它被定義為常量 11 索引，要么它失敗，因為第 11 個索引為空。
我怎么解決這個問題？感謝您的任何建議。
uj5u.com熱心網友回復：
經過深入研究：
var model = @Html.Raw(Json.Serialize(interventionCounter));
var monthlyData = [];
$.each(model, function (index, item) {
monthlyData .push(item.toString());
});
然后在 Chartjs 腳本中：
data: monthlyData,
解決了我的問題。我標記這個答案是為了在將來幫助其他人。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/457354.html
標籤：javascript asp.net-mvc-3 图表.js