我正在尝试使用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
请查看此 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(); });