Chartkick - Линейный график из нескольких серий не работает без значений даты - PullRequest
Новая
       27

Chartkick - Линейный график из нескольких серий не работает без значений даты

0 голосов
/ 09 ноября 2018

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

код erb 

<%= line_chart [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]},
  { name: 'Manufacturing', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] },
  { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] },
  { name: 'Project Development', data: [0, 0, 7988, 12169, 15112, 22452, 34400, 34227] },
  { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }]
%>

выходной сигнал 

<script type="text/javascript">
  new Chartkick.LineChart("chart-1", [{"name":"Installation","data":[43934,52503,57177,69658,97031,119931,137133,154175]},
    {"name":"Manufacturing","data":[24916,24064,29742,29851,32490,30282,38121,40434]},
    {"name":"Sales \u0026 Distribution","data":[11744,17722,16005,19771,20185,24377,32147,39387]},
    {"name":"Project Development","data":[0,0,7988,12169,15112,22452,34400,34227]},
    {"name":"Other","data":[12908,5948,8105,11248,8989,11816,18274,18111]}], {});
</script>

Вот рабочий пример без данных о времени и времени, а также без категорий. https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic/

Я использую Highcharts 6.2.0 и chartkick 3.0.1

Заранее спасибо за любую помощь.

1 Ответ

0 голосов
/ 09 ноября 2018

Chartkick.LineChart не принимает данные как [123,1212].

Официальная документация - https://github.com/ankane/chartkick.js?files=1#usage

Правильный способ передачи данных [{"name":"Installation","data":{"2018-10-10":43934,"2018-10-11":52503,"2018-10-12":57177,"2018-10-13":69658,"2018-10-14":97031,"2018-10-15":119931,"2018-10-16":137133,"2018-10-17":154175}}]

HTML 

<html>
  <head>
    <title>Chartkick Example</title>
  </head>
  <body>
    <div id="chart-1" style="height: 300px"></div>
    <script src="https://unpkg.com/chartkick@3.0.1/dist/chartkick.js"></script>
    <script src="https://code.highcharts.com/highcharts.src.js"></script>
  </body>
</html>

JS 

//new Chartkick.LineChart("chart-1", {"2017-01-01": 11, "2017-01-02": 6});

function parseData(input){
  var count = 10; 
  return input.reduce(function(o,i){
    var oo = {};
    o['2018-10-' + count] = i;
    count++;
    //o(oo);
    return o;
  },{});
}

var inputData = [{"name":"Installation","data":[43934,52503,57177,69658,97031,119931,137133,154175]},
{"name":"Manufacturing","data":[24916,24064,29742,29851,32490,30282,38121,40434]},
{"name":"Sales \u0026 Distribution","data":[11744,17722,16005,19771,20185,24377,32147,39387]},
{"name":"Project Development","data":[0,0,7988,12169,15112,22452,34400,34227]},
{"name":"Other","data":[12908,5948,8105,11248,8989,11816,18274,18111]}];

inputData.forEach(function(i){
  console.log(i);
  i.data = parseData(i.data);
});
console.log(inputData);
new Chartkick.LineChart("chart-1",inputData , {});

jsFiddle Demo - https://jsfiddle.net/bet9mh38/1/

...