Highcharts：在柱狀圖上顯示特殊標記

確切地說，圖表是在板球比賽中的每場比賽中得分。（樣本生成的圖形，截至目前：http://img839.imageshack.us/img839/6091/screenshot20111117at124.png）

現在我真正想要的是展示其在檢票口下降（類似：http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png），在列的頂部的藍色圓點。

在highchart中可以做到這一點嗎？我在這個圖表中看到了這個片段（像這裏描述的太陽：http://www.highcharts.com/demo/spline-symbols）。

來源

2011-11-17 Shamail Tayyab

將是冷靜，如果你能接受任何下面的答案:) –

在data陣列，您可以指定一個特定的點選項（如自定義標記，以表明）：

[...] 
series: [{ 
     name: 'Tokyo', 
     marker: { 
      symbol: 'square' 
     }, 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, /* HERE >>> */{ 
      y: 26.5, 
      marker: { 
       symbol: 'url(/demo/gfx/sun.png)' 
      } 
     }, 23.3, 18.3, 13.9, 9.6] 

     }, 
[...]

無論如何，我不認爲有可能把標記過的圖表元素。

http://www.highcharts.com/ref/#point-marker

來源

2011-11-17 07:54:26 mamoo

請求約爲柱形圖，標誌僅在線路和區域圖可見...... – PhiLho

我也有過類似的挑戰，在這裏我需要將特定的圖標在我列的頂部：

column markers

要做到這一點，我用了formatter回調：

plotOptions: { 
    column: { 
    dataLabels: { 
     enabled: true, 
     useHTML: true, 
     formatter: function() { 
     return '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/path/to/special/icon"></div></div>'; 
     }, 
     y: 0 
    } 
    } 
}

正如你所看到的，你可以動態地設置一個基於wh的圖像路徑或元素類atever你的x/y /系列/點/總數/百分比值是。

最後，您還需要爲yAxis增加maxPadding，否則圖標/值將被截斷（顯然取決於圖標大小）。

要看到它與一些「動態」佔位符畫面動作，看看這個的jsfiddle： http://jsfiddle.net/DMCXS/

來源

2013-04-11 04:22:37

您可以使用兩個系列，第一列，並具有自定義標記第二散射。

例子：http://jsfiddle.net/NDpu6/

series: [{ 
      name: 'Tokyo', 
      type:'column', 
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

     }, { 
      name: 'New York', 
      type: 'scatter', 
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

     }]

來源

2013-04-11 08:46:05

尼斯，特別是因爲它與rHighcharts一起工作！ – Kalle

哇，很簡單的解決方案。希望在考慮所有更復雜的問題之前，我會考慮它。 – Spencer

Highcharts：在柱狀圖上顯示特殊標記

回答

相關問題