![](/img/trans.png)
[英]Send JSON data to highcharts pie from asp.net MVC controller in C#
[英]Preprocessing data in HighCharts JS in C# ASP.NET
我正在使用HighCharts JS在ASP.NET 2.0中創建條形圖。
這是可以在javascript中完成的圖表:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
我在C#代碼中有這個
public string[] Names = new string[] { "Name1", "Name2", "Name3"};
public string[] Data = new string[] { "[1,0,4]", "[5,7,3]", "[2,3,4]"};
如何在javascript中使用此字符串[]名稱和數據來更改圖表的值?
請幫助我陷入困境。 :( 謝謝!
-編輯ARISTOS--
我嘗試了您的答案,但這不起作用。 根據您的答案,此javascript將與您所做的相同。 檢查一下:
$(function () {
var seriesTest = "{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }";
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [seriesTest]
});
});
我已經嘗試過了,但是這行不通,因為我認為series.data在其括號([])內僅接受整數。
我已經按照KingCronus的建議檢查了DotNet.HighCharts,但這不能在asp.net 2.0框架中使用。 :(
在最簡單的表單上,您只需要以正確的格式呈現它們即可。 這是一個簡單的示例,可能需要幾個星期的時間...
在后面的代碼上運行此代碼,也許在PageLoad上運行
StringBuilder sb = new StringBuilder();
for(int i = 0 ; i < 3 ; i++)
sb.AppendFormat("{3}{{name: '{0}',data: {1} }}",
Names[i], Data[i],
i>0 ? "," : "" // this is render the comma "," after the first line
);
ScriptData.Text = sb.ToString();
並使用文字控件將它們放在頁面上的腳本中
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [
<asp:Literan id="ScriptData" Runat="server" EnableViewState="off" />
]
});
});?
這是我對問題的解決方案,以防萬一有人需要它。
這是JS函數:
function LoadChart() {
var Names = <%= this.javaSerial.Serialize(this.Names %>;
var Data = <%= this.javaSerial.Serialize(this.Data %>;
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apple', 'Banana', 'Orange']
},
yAxis: {
title: {
text: 'fruit eaten'
}
},
series: [{
name: Names[0],
data: [Data[0]]
}]
};
for (var i=1; i<Names.Length; i++)
{
options.series.push({
name: Names[i],
data: [Data[i]]
});
}
var chart = new Highcharts.Chart(options);
}
以下是部分代碼:
public JavaScriptSerializer javaSerial = new JavaScriptSerializer();
public string[] Names = new string[] { "Jane", "John", "Mike" };
public string[] Data = new string[] { "1,2,3", "2,4,6", "3,6,9" }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.