2012-07-26 2 views
0

내 차트를 표시하기 위해 HighCharts를 사용하고 있습니다.
내가 원했던 것은 (확대/축소 가능) 날짜 - 시간 X 축과 Y 축의 숫자가있는 꺾은 선형 차트입니다.
그러나 결과는 엉망 :높은 차트가있는 라인 차트가 엉망입니다

enter image description here

내가 아약스 호출에 의해 데이터를로드, 배열을 생성하고 차트의 데이터를 설정 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를 사용

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' }] 

답변

3

귀하 데이터 세트가 시간순으로 정렬되지 않았습니다. 따라서 차트 작성 시스템은 최선의 방법으로 모든 포인트에 동참합니다. 시간 기반 시리즈의 경우 가장 빠른 시간부터 가장 최신 시간까지 시간을 정렬하는 것이 가장 좋습니다.

+0

믿을 수가 없어. 감사. 내 하루를 구했다! – Kamyar

관련 문제