帶有來自CSV的錯誤欄的高圖表

我想使用從Excel導出的CSV數據創建帶有高度圖的條形圖。我所看到的關於數據模塊的例子似乎工作正常，但我怎麼能添加錯誤欄系列和其他信息（例如點特殊筆記或顏色）？帶有來自CSV的錯誤欄的高圖表

我成立了一個的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文件的結構。

來源

2017-04-20 The Jakester

我認爲最好的想法是寫你的擁有簡單的csv解析器，您也可以嘗試使用seriesMapping進行遊戲 - http://api.highcharts.com/highcharts/data.seriesMapping – stpoa

有數據模塊的問題，我創建使用data.seriesMapping

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

 
$('#container1').highcharts({ 
 
    data: { 
 
    csv: document.getElementById('csv2').innerHTML, 
 
\t \t seriesMapping: [ 
 
    \t { 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/

來源

2017-04-20 14:44:05 stpoa

帶有來自CSV的錯誤欄的高圖表

回答

相關問題