高图活动量规标题固定在中间

时间:2018-09-12 05:05:16

标签: javascript html css ionic-framework highcharts

我想在中心显示Highchart的百分比,并且始终固定不变,现在看来好像只将鼠标移到了上面。 这是我到目前为止的https://jsfiddle.net/andreavecy/q8kcvpd4/

    function renderIcons() {

    this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
        .attr({
            'stroke': '#303030',
            'stroke-linecap': 'round',
            'stroke-linejoin': 'round',
            'stroke-width': 2,
            'zIndex': 10
        })
        .translate(190, 61)
        .add(this.series[0].group);

}

    Highcharts.chart('container', {

      chart: {
        type: 'solidgauge',
        height: '50%',
      },

      title: {
        text: 'Activity',
        style: {
          fontSize: '24px'
        }
      },

      tooltip: {
        borderWidth: 0,
        backgroundColor: 'none',
        shadow: false,
        style: {
          fontSize: '16px'
        },
        pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
        positioner: function (labelWidth) {
          return {
            x: (this.chart.chartWidth - labelWidth) / 2,
            y: (this.chart.plotHeight / 2) + 15
          };
        }
      },

      pane: {
        startAngle: 0,
        endAngle: 360,
        background: [{ // Track for Move
          outerRadius: '112%',
          innerRadius: '88%',
          backgroundColor: Highcharts.Color('#5858FA')
            .setOpacity(0.3)
            .get(),
          borderWidth: 0
        }]
      },

      yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: []
      },

      plotOptions: {
        solidgauge: {
          dataLabels: {
            enabled: false
          },
          linecap: 'round',
          stickyTracking: false,
          rounded: true
        }
      },

      series: [{
        name: 'Move',
        data: [{
          color: '#5858FA',
          radius: '112%',
          innerRadius: '88%',
          y: 80
        }]
      }]
    });

为了更清楚一点,我需要一些东西,如下图所示: enter image description here

我也将页面留在进行示例https://www.highcharts.com/demo/gauge-activity

的地方

0 个答案:

没有答案