更改指针线样式

时间:2017-09-15 09:36:10

标签: javascript canvas chart.js

我正在使用此示例创建规范,但我必须更改指针样式。 是否可以像这样改变指针样式?

enter image description here

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

1 个答案:

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