带有来自 CSV 的误差线的 Highcharts 图表答案

【问题标题】：Highcharts chart with Error bars from CSV带有来自 CSV 的误差线的 Highcharts 图表
【发布时间】：2017-04-20 22:44:05
【问题描述】：

我想使用从 Excel 导出的 CSV 数据创建带有 Highcharts 的条形图。我看到的数据模块的例子似乎工作得很好，但是我怎样才能添加错误栏系列和其他信息（例如点特别说明或颜色）？

我在这里设置了一个jsFiddle：http://jsfiddle.net/jmunger/z3oeu2aa/1/

第一个图表使用简单的 CSV 数据。

第二个图表包含更复杂的 CSV 数据，列表示错误栏的低位和高位，列表示特定数据点注释。

<pre id="csv2" style="display: none">Year, Grade 1, Grade 1 Low, Grade 1 High, Grade 1 Note, Grade 2, Grade 2 Low, Grade 2 High,Grade 2 Note, Grade 3, Grade 3 Low, Grade 3 High, Grade 3 Note
2010-2011,1,0,2,999,2,1,4,,5,4,6,999
2012-2013,1,0,2,999,2,1,4,,5,4,6,999
2014-2015,1,0,2,999,2,1,4,,5,4,6,999</pre>

显然此时第二个图表不起作用，因为所有列都创建了一个常规系列。

有没有办法使用数据模块来处理这样的 CSV - 至少是部分？

如有必要，可以更改 CSV 文件的结构。

【问题讨论】：

我认为最好的办法是编写自己的简单 csv 解析器，您也可以尝试使用 seriesMapping -api.highcharts.com/highcharts/data.seriesMapping

标签： javascript highcharts

【解决方案1】：

数据模块有问题，我使用data.seriesMapping创建了一个解决方法示例

Highcharts.setOptions({
  chart: {
  	events: {
    	load () {
      	this.series.forEach((s) => {
        	// Workaround for data module problem
          if (s.name === 'Year') {
          	s.update({data: [], visible: false, showInLegend: false})
          }
        })
      }
    },
    type: 'column',
    backgroundColor: '#F0F0F8',
    shadow: true
  }
})

$('#container1').highcharts({
  data: {
    csv: document.getElementById('csv2').innerHTML,
		seriesMapping: [
    	{ x: 0, y: 1, name: 1 },
      { x: 0, y: 5, name: 5 },
      { x: 0, y: 5, name: 5 },
      { x: 0, y: 9, name: 9 },
      { name: 0 }, { name: 0 }, { name: 0 }, { name: 0 }, { name: 0 } // Workaround for data module problem
    ]
  },
  title: {
    text: 'Complex CSV data'
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<div id="container1"></div>

<pre id="csv2" style="display: none">Year, Grade 1, Grade 1 Low, Grade 1 High, Grade 1 Note, Grade 2, Grade 2 Low, Grade 2 High,Grade 2 Note, Grade 3, Grade 3 Low, Grade 3 High, Grade 3 Note
2010-2011,1,0,2,999,2,1,4,0,5,4,6,999
2012-2013,1,0,2,999,2,1,4,0,5,4,6,999
2014-2015,1,0,2,999,2,1,4,0,5,4,6,999</pre>

现场示例： http://jsfiddle.net/p8hbwzx0/

【讨论】：