2015-08-17 2 views
0

Я пытаюсь использовать Highcharts со следующим кодомОшибка № 14 при попытке чтения данных CSV

<html> 
<head> 
    <script type="text/javascript" src="/scriptaculous/lib/prototype.js"></script> 
    <script type="text/javascript" src="../../Js/prototype-adapter.js"></script> 
    <script type="text/javascript" src="../../Js/highcharts.js"></script> 
    <script type="text/javascript" src="../../Js/modules/data.js"></script> 
</head> 
<body> 
<div id='gfx' style="width:1024px; min-width: 310px; height: 400px; margin: 0 auto"></div> 
<pre id='csv'>Production,Duration 
2014-10-27,2866,08.50 
2014-10-28,6471,09.20 
2014-10-29,7609,09.25 
2014-10-30,7552,09.11 
</pre> 
<script type="text/javascript"> 
    var chart = new Highcharts.Chart({ 
     chart: { 
      type: 'spline', 
      renderTo: 'gfx' 
     }, 
     title: { 
      text: 'Daily statistics' 
     }, 
     xAxis: { 
      type: 'date' 
     }, 
     yAxis: [ 
      { 
       title: { text: 'Watt hours' } 
      }, 
      { 
       title: { text: 'Hour.Minutes' }, 
       opposite: true 
      } 
     ], 
     data: { 
      csv: document.getElementById('csv').innerHTML, 
      firstRowAsNames: false 
     }, 
     series:[] 
    }); 
</script> 

</body> 
</html> 

Но HightCharts поднял ошибку # 14. Я попытался изменить значения float на целые числа и/или использовать dateFormat: форматировать формат даты, но все не удается.

Итак, где моя ошибка?

Благодаря

Laurent

ответ

2

У вас есть несколько вещей, происходящих здесь:

Ваш CSV имеет названия и вы установили firstRowAsNames, как ложные

Ваш CSV имеет 2 пункты в строке заголовка, и вам нужно 3

Нет типа «даты» xAxis. Это «datetime»

Вы не говорите о высоких картах, что вы хотите, чтобы ваша вторая серия была сопоставлена ​​с вашим 2-м яксисом.

Я оставил скрипку с помощью jquery вместо того, чтобы сменить ее на прототип, но тот же код будет работать.

<pre id="csv" style="display:none">Date,Production,Duration 
2014-10-27,2866,08.50 
2014-10-28,6471,09.20 
2014-10-29,7609,09.25 
2014-10-30,7552,09.11</pre> 


var chart = new Highcharts.Chart({ 
    chart: { 
     type: 'spline', 
     renderTo: 'gfx' 
    }, 
    title: { 
     text: 'Daily statistics' 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 
    yAxis: [{ 
     title: { 
      text: 'Watt hours' 
     } 
    }, { 
     title: { 
      text: 'Hour.Minutes' 
     }, 
     opposite: true 
    }], 
    data: { 
     csv: document.getElementById('csv').innerHTML, 
     firstRowAsNames: true 
    }, 
    series: [{ 
     yAxis: 0 
    }, { 
     yAxis: 1 
    }] 
}); 

http://jsfiddle.net/c92acrvx/2/

+1

** спасибо **: теперь он работает очень хорошо. – destroyedlolo

Смежные вопросы