Question

我想使用从Excel导出的CSV中的数据创建包含Highcharts的条形图。我看到的数据模块的例子似乎工作正常，但我怎么能添加错误栏系列和其他信息（例如点特殊注释或颜色）？

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

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

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

＆＃13;

bytes[1]

＆＃13;

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

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

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

Answer 1

数据模块存在问题，我使用data.seriesMapping

创建了一个使用变通方法的示例

＆＃13;

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'
  }
})

＆＃13;

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

＆＃13;

实例： http://jsfiddle.net/p8hbwzx0/

带有CSV错误栏的Highcharts图表

1 个答案: