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

});

Highcharts规范不渲染文本

1 个答案: