【发布时间】：2017-04-29 06:26:14
【问题描述】：
我是使用 Highcharts 的新手。我创建了一个示例 ASP.NET MVC 应用程序，以使用从控制器返回到视图页面的 json 数据创建折线图。另外，我使用ajax通过成功回调函数获取图表的数据。
这是数据的结构（示例 4 行类型为 List 的 TagTimeValue）
private List<TagTimeValue> GetTagTimeValues()
{
var tagTimeValues = new List<TagTimeValue>
{
new TagTimeValue { ID=1, Name="CDT158", Value="23.9483", Time="04/01/2017", Good="true", Questionable="No", Units="vol", Substituted="not"},
new TagTimeValue { ID=2, Name="CDT158", Value="24.1183", Time="04/02/2017", Good="true", Questionable="No", Units="vol", Substituted="not"},
new TagTimeValue { ID=3, Name="CDT158", Value="25.2383", Time="04/03/2017", Good="false", Questionable="yes", Units="vol", Substituted="not"},
new TagTimeValue { ID=4, Name="CDT158", Value="25.6713", Time="04/04/2017", Good="false", Questionable="yes", Units="vol", Substituted="not"}
};
return tagTimeValues;
}
这是ajax调用调用的方法
public ActionResult UpdateTrend()
{
var values = GetTagTimeValues();
return Json(values, JsonRequestBehavior.AllowGet);
}
在Index.cshtml中通过ajax调用UpdateTrend()的脚本
$(document).ready(function () {
$.ajax({
url: "/home/UpdateTrend",
type: 'GET',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
cache: false
}).success(function (dataChart) {
var Xaxis = [];
var dataSeries = [];
for (var i = 0; i < dataChart.length; i++) {
var items = dataChart[i];
var XcategoriesItem = items.Time;
var seriesData = items.Value;
Xaxis.push(XcategoriesItem);
dataSeries.push(seriesData);
}
console.log(dataSeries);
getChart(Xaxis, dataSeries);
}).error(function (er, xhr, e) {
console.log("Error: ", er, xhr, e);
})
});
还有，getChart 函数
function getChart(Xaxis, dataseries)
{
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Alarms/Events Chart'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y}%'
}
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Time'
},
categories: Xaxis
},
yAxis: {
title: {
text: 'Value'
}
},
series: dataseries
});
};
它将图表呈现到带有id 容器的<div id="container" style="width:100%; height: 500px;"></div>。
根据脚本，我希望我的图表具有 x 轴时间和 y 轴值作为系列。但是，当我运行应用程序时，没有显示任何数据（截图如下）。
我还检查了 Google 的 chrome console 面板中的 json 数据，可以看到 Time（x 轴）和 Value（系列）的数组已成功解析。
我的图表中是否缺少不允许显示系列的配置？或者，我的图表脚本有问题吗？
我在谷歌上搜索了类似的问题，发现了很多可能的解决方案，但很困惑我应该遵循哪一个。
非常感谢任何帮助。
【问题讨论】：
-
我相信您正在为每个数据点制作一个系列，而不是一个包含多个数据点的系列。 highcharts 期望的是
series: [{ name: 'some name', data: [1, 2, 3, 4]}]之类的东西，而您提供的是series: [ 1, 2, 3, 4 ] -
@Rob 感谢您的回复。那么，您是说 Highcharts 不接受每个数据点一个系列？如果是这种情况，那么在我的函数
getChart中，它应该类似于series: { name: 'some name', data: dataseries }，其中dataseries仍然是一个值数组。 -
它接受，如果这是你提供的；我的意思是你错误地使用了 API；
series不是一组数据点，它更详细地描述了该系列。在文档中查看here。如果您想要每个数据点一个系列；这很好 - 但您仍然需要为每个系列提供一组数据（即使该数组包含一个元素）。所以是的，我相信你在评论中的例子应该有效 -
@Rob，我已将
series更改为series: [{ name: 'series 1', data: [23.9483, 24.1183, 25.2383, ....]}]并显示图表。也感谢您分享系列 | 上的链接Highcharts 文档。我还注意到，当数组的元素是series中的字符串时，折线图不会显示。
标签： c# jquery ajax asp.net-mvc highcharts