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(); 

}); 

});