Question

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

HTML脚本

while (em.hasMoreElements()) {
    String element = (String)em.nextElement();
    if (!"uname".equals(element))
        session.removeAttribute(element);
}

的JavaScript

<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>

我想要的结果应该类似于下面的内容： 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应由替换为空。 as 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

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

1 个答案: