Javascript Highcharts无法呈现文本

我正在尝试使用Highcharts创建一个仪表

在仪表中，我想渲染针尖处的文本，当针尖位置改变时，文本的位置应该改变。我已经在仪表的起始位置和结束位置添加了一些文本，我需要根据针尖添加第三个文本

请你看一下，让我知道我是怎么做的好吗

我的jsiddle链接是

编辑：

---

我想要这样的东西

我不确定你是否完全理解你的问题， 请检查这个

---

嗨，谢谢你的回复。我想你很清楚我的问题。我想要像迪丝这样的东西。在指针的顶端，它应该显示链接中所示的数据。我已硬编码了这些值，但需要动态执行。请尝试以下链接：。指针的值显示在div中。我也用随机数据做了一个样本，

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

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

});