Highcharts 게이지 스타일과 추가 CSS 요소

을 현재, 나는 다음과 같은 모델 작업이 있습니다

을 (하시기 바랍니다

$(function() { 

    var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container', 
     type: 'gauge' 
    }, 
    title: { 
     text: 'Hydration Index' 
    }, 

    pane: { 
     startAngle: -140, 
     endAngle: 140, 
     size: 200, 
     background: { 
     backgroundColor: { 
      linearGradient: [0, 300, 300, 300], 
      stops: [ 
      [0, 'rgb(152, 230, 230)'], 
      [1, 'rgb(0, 0, 10)'] 
      ] 
     }, 
     innerRadius: '70%', 
     outerRadius: '100%', 
     shape: 'arc', 
     } 
    }, 


    yAxis: { 
     reversed: true, 
     min: 0, 
     max: 100, 
     plotBands: [{ // mark the weekend 
     }], 
     tickInterval: 600 
    }, 


    plotOptions: { 

     gauge: { 
     dataLabels: { 
      enabled: false 
     }, 

     dial: { 
      radius: '100%', 
      backgroundColor: 'black', 
      borderColor: 'white', 
      borderWidth: 0.5, 
      rearLength: 0, 
      baseWidth: 10, 
      topWidth: 1, 
      baseLength: '0%' 
     }, 
     pivot: { 
      radius: 0 
     } 
     }, 

    }, 


    series: [{ 
     name: 'Hydration percent', 
     data: [20], 
    }], 

    credits: { 
     enabled: false 
    }, 
    }); 

});

) 가장 업데이트 된 코드의 바이올린 참조

1) 곡선의 가장자리를 계기의 한쪽면에만 어떻게 추가합니까?

2) 바늘 방향을 시계 방향에서 반 시계 방향으로 바꿀 수 있습니까? 그래프가 작동하는 방식으로 작동하도록 yaxis를 역전 시켰지만 카운터 직관적으로 높은 곳에서 시작하여 이후부터 진행합니다 (따라서 차트가 0-100에서 내 데이터 값이 10이면 시작됩니다. 100에서 10으로 이동).

3) 마지막으로, 결과에 따라 변경되는 동적 텍스트를 추가 할 수있는 방법이 있습니까? 이 렌더러는 Axis.getPlotBandPath 방법을 modyfying가되기 전에 당신이 SVG의 경로를 수정할 수 있습니다 -

출처

2016-08-10 Zohair Zaman

이 가능하지만 조금 까다로운. 아래의 데모를보십시오.
당신은 간단하게, 콜백에서 그 다음 초기 애니메이션과 설정 값 = 0을 사용하지 않도록 올바른 값으로 지점 업데이트 할 수 있습니다
:
```
series: [{ 
    name: 'Hydration percent', 
    animation: false, 
    data: [ 
    0 
    ] 
}], 
```
그리고 콜백 :
```
function(chart) { // on complete 
    chart.series[0].points[0].update(80); 
    ... 
} 
```
이 아니다 Renderer.text을 사용하는 경우 문제가 발생합니다. 예를 들어 : http://jsfiddle.net/8p8ab8bg/
:
```
chart.myLabel.attr({ 
    text: 'Nice!' 
}); 
```
여기

가 작동 데모입니다 :

chart.myLabel = chart.renderer.text('Test', 10, 10).add(); // store in some variable

그런 다음 텍스트를 업데이트

출처

2016-08-11 13:21:45

Highcharts 게이지 스타일과 추가 CSS 요소

답변

관련 문제