微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – Highcharts规范不渲染文本

我正在尝试使用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.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

解决方法

我不确定完全理解你的问题,
请查看此 link

var chart = new Highcharts.Chart({
    chart: {
        type: 'gauge',size: '60%',series: [{
        data: [100],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();

});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐