如何在 Highchart 中显示来自 csv 的多个类别数据的基本折线图？

Question

我尝试显示折线图以显示多个类别在时间范围内的趋势。下面是我的代码。但它不能显示任何图表。 因此，我想知道是不是因为数据结构不正确。 下面是针对我的情况的 HTML 和 JavaScript。 JSFiddle Onlie

HTML 脚本

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://rawgit.com/mholt/PapaParse/master/papaparse.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<pre id="line_bl" style="display:none">Date,Installation,Manufacturing,Sales,Project Development,Other,
2017-06-26,0.25,7,0.5,2.25,null,
2017-07-03,null,6.5,2.4,2.65,0.7,
2017-07-10,null,6.3,3.4,3.65,0.65,
2017-07-17,0.75,6.25,2.25,2.75,0.5,
</pre>

<div id="trend_bl"></div>

JavaScript

Highcharts.chart('trend_bl', {

    title: {
        text: 'Trend by Business Lines'
    },
    yAxis: {
        title: {
            text: 'Resource Allocation'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            pointStart: 2010
        }
    },

    data: {
        line_bl: document.getElementById('line_bl').innerHTML
    },
});

我想要的结果应该如下所示： Line Graph

Answer 1

您的 csv 数据应如下所示

<pre id="line_bl" 
style="display:none">Date,Installation,Manufacturing,Sales,Project Development,Other
2017-06-26,0.25,7,0.5,2.25, ,
2017-07-03, ,6.5,2.4,2.65,0.7,
2017-07-10, ,6.3,3.4,3.65,0.65,
2017-07-17,0.75,6.25,2.25,2.75,0.5,</pre>

null 应替换为 空。因为 null 不是数值

更新以删除series 6

错误是因为每个系列行的末尾都有逗号

<pre id="line_bl" 
style="display:none">Date,Installation,Manufacturing,Sales,Project Development,Other
2017-06-26,0.25,7,0.5,2.25,
2017-07-03, ,6.5,2.4,2.65,0.7
2017-07-10, ,6.3,3.4,3.65,0.65
2017-07-17,0.75,6.25,2.25,2.75,0.5</pre>

Updated fiddle

使用 data.parsed 使用具有空值的数据

  data: {
    csv: document.getElementById('csv').innerHTML,
    parsed: function(columns) {
      var newColumns = [];
      Highcharts.each(columns, function(c, j) {
        newColumns.push([]);
        Highcharts.each(c, function(p, i) {
          newColumns[j].push(parseFloat(p) || null)
        })
      })
      this.columns = newColumns;
    }
  },

Fiddle