Highcharts測量儀不呈現文字

Question

我正在嘗試使用Highcharts創建測量儀。

在儀表中，我希望在針尖處呈現文字，並且針尖位置變化時文字的位置應該會改變。我已經在量表的起始位置和終點位置添加了一些文字，我需要根據針尖添加第三個文字。

你可以請看看，讓我知道我是怎麼做的？

我的jsfiddle鏈接是http://jsfiddle.net/anchika/nszqbsgx/1/

var chart = new Highcharts.Chart({ 
    chart: { 
     type: 'gauge', 
     renderTo: container, 
     marginTop: -60, 
     marginRight: 0, 
     spacingLeft: 0, 
     spacingBottom: 0, 
     backgroundColor: null, 
    }, 
    pane: { 
     center: ['50%', '57%'], 
     size: '75%', 
     startAngle: -150, 
     endAngle: 150, 
     background: [{ 
      borderColor: '#000', 
     }], 
    }, 
    tooltip: { 
     enabled: false 
    }, 
    title: { 
     text: null, 
    }, 

    yAxis: { 
     min: 0, 
     max: 100, 
     title: { 
      y: -20, 
      useHTML: true, 
      text: 'graphTitle', 
      style: { 
       fontFamily: 'Raleway', 
       fontSize: '2em', 
       textAlign: 'center', 
      } 
     }, 
     labels: { 
      enabled: false, 

     }, 
     tickInterval: 16.66, 
     tickWidth: 5, 
     tickPosition: 'outside', 
     tickLength: 10, 
     tickColor: '#000', 
     minorTickColor: '#000', 
     lineColor: null, 
     plotBands: [{ 
      from: 0, 
      to: 33, 
      color: '#00A600', // green 
      outerRadius: '100%', 
      thickness: '15%' 
     }] 
    }, 
    plotOptions: { 
     gauge: { 
      innerRadius: '90%', 
      dial: { 
       backgroundColor: 'rgba(0,0,0,0.4)', 
      } 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     data: [33], 
     dataLabels: { 
      useHTML: true, 
      //format: gaugeFormat, //Modify here to change the radial center values 
      borderWidth: 0, 
      style:{ 
       fontFamily:'Raleway', 
       fontWeight: 'normal', 
      }, 
      x: 5, 
     }, 
     tooltip: { 
      enabled: false, 
     } 
    }] 
    }, 

           function (chart) { // on complete 
     chart.renderer.text('End Time',500,370) 
     .css({ 
      color: '#000', 
      fontSize: '16px' 
     }) 
     .add(); 
    chart.renderer.text('Start Time', 240, 370) 

     .css({ 
      color: '#000', 
      fontSize: '16px' 
     }) 
     .add(); 
}); 

編輯： 我想是這樣的link

Answer 1

我真的不知道，完全理解你的問題， 請檢查該link

var chart = new Highcharts.Chart({ 
    chart: { 
     type: 'gauge', 
     renderTo: container, 
     marginTop: -60, 
     marginRight: 0, 
     spacingLeft: 0, 
     spacingBottom: 0, 
     backgroundColor: null, 
    }, 
    pane: { 
     center: ['50%', '57%'], 
     size: '60%', 
     startAngle: -150, 
     endAngle: 150, 
     background: [{ 
      borderColor: '#000', 
     }], 
    }, 
    tooltip: { 
     enabled: false 
    }, 
    title: { 
     text: null, 
    }, 

    yAxis: { 
     min: 0, 
     max: 100, 
     title: { 
      y: -20, 
      useHTML: true, 
      text: 'graphTitle', 
      style: { 
       fontFamily: 'Raleway', 
       fontSize: '2em', 
       textAlign: 'center', 
      } 
     }, 
     labels: { 
      enabled: false, 

     }, 
     tickInterval: 16.66, 
     tickWidth: 5, 
     tickPosition: 'outside', 
     tickLength: 10, 
     tickColor: '#000', 
     minorTickColor: '#000', 
     lineColor: null, 
     plotBands: [{ 
      from: 0, 
      to: 33, 
      color: '#00A600', // green 
      outerRadius: '100%', 
      thickness: '15%' 
     }] 
    }, 
    plotOptions: { 
     gauge: { 
      innerRadius: '90%', 
      dial: { 
       backgroundColor: 'rgba(0,0,0,0.4)', 
      } 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     data: [100], 
     dataLabels: { 
      useHTML: true, 
      //format: gaugeFormat, //Modify here to change the radial center values 
      borderWidth: 0, 
      style:{ 
       fontFamily:'Raleway', 
       fontWeight: 'normal', 
      }, 
      x: 5, 
     }, 
     tooltip: { 
      enabled: false, 
     } 
    }] 
    }, 

           function (chart) { // on complete 
     console.log(chart); chart.renderer.text(chart.series[0].data[0].y,140+chart.series[0].data[0].y*2,350) 
     .css({ 
      color: '#000', 
      fontSize: '16px' 
     }) 
     .add(); 

});