Highcharts - 溫度計

Question

目前我可以看到的Highcharts的一個缺點是，它的量表庫中似乎沒有類似溫度計的任何東西。我可以看到，你可能可以使用例如1欄柱形圖或類似的東西來擺弄一些東西，但這並不真正開始看起來像一個溫度計，即在底部有一個填充顏色的燈泡，或者甚至是一個圓形的底座。

我是否忽略了這樣做的方法，還是僅僅從Highcharts曲目中缺失？來自Highcharts的任何人都請注意評論？

Answer 1

但它確實相當聽起來像我要倒黴與 Highcharts在這一個，可惜這樣一個簡單的修改到 exisitng形狀。

不要放棄這麼容易。 Highcharts是一種工具;如果它不像你想要的那樣完成，那就自己動手吧。這就是成爲一名優秀的軟件開發人員的全部內容。

例如，這個fiddle將溫度計的SVG圖像與36行代碼中的柱狀圖組合在一起。這將需要一些波蘭，但希望它可以讓你去。

$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'column', 
       marginBottom: 53 
      }, 
      credits: { 
       enabled: false 
      }, 
      title: null, 
      legend: { 
       enabled: false 
      }, 
      exporting: { 
       enabled: false 
      }, 
      yAxis: { 
       min: 0, 
       max: 100, 
       title: null, 
       align: 'right' 
      }, 
      xAxis: { 
       labels: false 
      }, 
      series: [{ 
       data: [60], 
       color: 'red' 
      }] 
     }, function(chart) { // on complete 

     chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg', 0, 0, 256, 400) 
      .add();   
    }); 
}); 

Answer 2

我固定它，see this fiddle.

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column', 
      marginBottom: 72 
     }, 
     credits: { 
      enabled: false 
     }, 
     title: null, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     yAxis: { 
      min: 0, 
      max: 100, 
      title: null, 
      align: 'right' 
     }, 
     xAxis: { 
      labels: false 
     }, 
     series: [{ 
      data: [54], 
      color: '#c00' 
     }] 
    }, function(chart) { // on complete 

    chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg',24, 0, 110, 510).add(); 

}); 

}）;