0

我正在使用 HighCharts 在我的网站上显示图表。
我想要实现的只是一个带有(可缩放)日期时间 X 轴和 Y 轴数字的折线图。
但结果一团糟:

在此处输入图像描述

我通过 ajax 调用加载数据,创建一个数组并用于chart.series[0].setData(chartData);设置图表的数据。下面是一个示例chartData

[[1343071800000, 17], [1343158200000, 171], [1343244600000, 291], [1343075400000, 18],
 [1343161800000, 74], [1343248200000, 293], [1343165400000, 183], [1343251800000, 296]]

此外,由于我使用的是 ASP.NET MVC 3,因此我使用 DotNetHighCharts,但生成的用于创建图表的 javascript 如下:

chart = new Highcharts.Chart({
chart: { renderTo:'chart_container' },
legend: { align: 'left', borderWidth: 0, floating: true, layout: 'horizontal', verticalAlign: 'top', y: 20 },
plotOptions: { series: { cursor: 'pointer', marker: { lineWidth: 1 }, point: { events: { click: function() { alert(Highcharts.dateFormat('%A, %b %e, %Y', this.x) +': '+ this.y +' visits'); } } } } },
subtitle: { text: 'Source: Google Analytics' },
title: { text: 'Daily visits at www.highcharts.com' },
tooltip: { crosshairs: true, shared: true },
xAxis: { gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 }, tickInterval: 604800000, tickWidth: 0, type: 'datetime' },
yAxis: [{ labels: { align: 'left', x: 3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, showFirstLabel: false, title: { text: '' } }, { gridLineWidth: 0, labels: { align: 'right', x: -3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, linkedTo: 0, opposite: true, showFirstLabel: false, title: { text: '' } }],
series: [{ name: 'All visits' }]  
4

1 回答 1

3

您的数据集不是按时间顺序排列的。因此,图表系统正在尽可能地连接所有点。对于基于时间的系列,最好将您的时间从最早到最晚排序。

于 2012-07-26T17:08:40.493 回答