Highcharts Solid Gauge - 测量值不正确

时间:2017-05-31 22:48:01

标签: highcharts

我使用两个系列作为实心标尺,其中一个系列的填充量不正确。我尝试过调整tickInterval,tickValue,min,max,但它并没有什么区别。即使我将该值设置为0,它也会占据超过50%的路径。

  vm.ecoScoreData = {
    options : {
      credits: {
        enabled: false
      },
      navigation: {
        buttonOptions: {
          enabled: false
        }
      },
      chart: {
        type: 'solidgauge',
        backgroundColor: '#F9F9F9',
        margin: [0, 0, 0, 0],
        height: 340
      },
      title: null,
      legend: {
        align: 'center',
        layout: 'vertical',
        labelFormatter: function () {
            return '<span class="gauge-legend-item">' + this.name + '</span><span class="series-value">' + $filter('number')(this.yData[0]) + '</span>';
        },
        useHTML: true,
        x: -10,
        y: -20,
        itemMarginTop: 4,
        itemMarginBottom: 4
      },
      pane: {
        center: ['50%', '70%'],
        size: '100%',
        startAngle: -90,
        endAngle: 90,
        background: {
          backgroundColor: '#305F2A',
          innerRadius: '75%',
          outerRadius: '100%',
          shape: 'arc'
        }
      },

      // the value axis
      yAxis: {
        minColor: '#74BC54',
        maxColor: '#74BC54',
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            text: 'Connected Vehicles',
            y: 40
        },
        labels: {
          enabled: false
        }
      },

      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: -30,
            borderWidth: 0,
            useHTML: true
          }
        }
      },
      tooltip: {
        enabled: false
      }
    },
    series: [
      {
        name: 'Opt-In '+chartData.optInPercent+'%',
        data: [{
          name: 'Opt-In',
          radius: 100,
          innerRadius: 75,
          y: chartData.optIn
        }],
        marker: {
          symbol: 'square'
        },
        lineWidth: 0,
        showInLegend: true,
        events: {
          legendItemClick: function() {
            return false;
          }
        },
        dataLabels: {
          formatter: function() {
            return'<div style="text-align:center"><span style="font-size:18px;color:#707070">'+$filter('number')(chartData.connectedVehicles)+'</span></div>';
          }
        }
      },
      {
        name: 'Opt-Out '+chartData.optOutPercent+'%',
        data: [{
          name: 'Opt-Out',
          radius: 100,
          innerRadius: 75,
          y: 0
        }],
        marker: {
          symbol: 'square'
        },
        lineWidth: 0,
        showInLegend: true,
        events: {
          legendItemClick: function() {
            return false;
          }
        },
        dataLabels: {
          format: '<div style="text-align:center"><span style="font-size:18px;color:#707070">{point.y:,.0f}</span></div>'
        }
      }
    ]

  };

enter image description here

0 个答案:

没有答案