我正在使用此示例创建规范,但我必须更改指针样式。 是否可以像这样改变指针样式?
Chart.Type.extend({
//Passing in a name registers this chart in the Chart namespace
name: "Gauge",
//Providing a defaults will also register the deafults in the chart namespace
defaults : defaultConfig,
initialize: function(data){
//Declare segments as a static property to prevent inheriting across the Chart type prototype
this.segments = [];
var pointerDotRadius = helpers.min([this.chart.width,this.chart.height])/50;
this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) - this.options.segmentStrokeWidth/2)/2;
this.SegmentArc = Chart.Arc.extend({
ctx : this.chart.ctx,
x : this.chart.width/2,
y : this.chart.height - pointerDotRadius
});
所有代码: jsbin.com
答案 0 :(得分:0)
这里是一个使用RGraph(https://www.rgraph.net)软件的类似的仪表图表:
https://www.rgraph.net/fiddle/view.html/new-rgraph-gauge-chart-example
以下是代码:
var meter = new RGraph.Meter({
id: 'cvs',
min: 0,
max: 100,
value: 75,
options: {
linewidthSegments: 20,
strokestyle: 'white',
segmentRadiusStart: 105,
border: 0,
tickmarksSmallNum: 0,
tickmarksBigNum: 0,
needleRadius: 205,
labels: false,
centerpinFill: 'black',
colorsRanges: [
[0, 30, '#FFC900'],
[30, 60, '#8FCE21'],
[60, 100, '#0094DA']
]
}
}).draw();