Highcharts gauge not render text

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

Edit: Я хочу что-то вроде этого link

Answer 1

I`m не уверен, что понял ваш вопрос полностью, Пожалуйста, проверьте этот 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(); 

});