Highcharts - 온도계

Question

Highcharts의 한 가지 단점은 현재 계기판에 온도계 게이지가 닮은 것 같지 않다는 것입니다. 나는 당신이 바이올린을 할 수 있지만 예를 들어 1 열 barchart 또는 이와 유사한 것을 사용하여 볼 수는 있지만 실제로 온도계처럼 보이기 시작하지는 않는다는 것을 알 수 있습니다. 예를 들어 밑면이나 원형베이스의 색상 채우기 전구 .

나는이 작업을 간과 했습니까? 아니면 Highcharts 레퍼토리에서 누락 되었습니까? 하이 차트 (Highcharts)의 누군가가 신경을 씁니다.

Answer 1

하지만이 대한 기존 모양 같은 간단한 수정이 하나 Highcharts, 수치로 운 될거야처럼 오히려 소리 않습니다.

너무 쉽게 포기하지 마십시오. 하이 차트는 도구입니다. 상자에서 원하는 것을 정확하게 수행하지 않으면 직접하십시오. 이것은 훌륭한 소프트웨어 개발자가되는 것입니다.

예를 들어,이 fiddle은 36 줄의 코드로 온도계의 SVG 이미지와 세로 막 대형 차트를 결합합니다. 약간의 광택이 필요 하겠지만 잘하면 그것이 당신을 갈 수 있습니다.

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

}); 

});