Question

我正在尝试绘制没有日期时间数据的多系列折线图，我不确定自己是否做错了什么，但是当我尝试类似以下操作时，图表上没有任何显示。

erb代码

ul.select2-selection__rendered

js输出

li

这是一个没有日期时间数据也没有类别的工作示例 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic/

我正在使用<%= 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>

在此先感谢您的帮助。

Answer 1

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演示-https://jsfiddle.net/bet9mh38/1/

Chartkick-没有日期值的多个系列折线图不起作用

1 个答案: