javascript - 为什么 ReactHighcharts SolidGauge 的圆形在 react 中不起作用

Question

我使用 react-highcharts 在我的仪表板页面中创建一个 SolidGauge。

并绘制圆边。

因此，我将 plotOptions.rounded 设置为 true。

代码:

import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';

HighchartsMore(ReactHighcharts.Highcharts);
SolidGauge(ReactHighcharts.Highcharts);

...
<ReactHighcharts config={ config }/>

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

它在官方工作jsfiddle具有相同的配置设置。

但 ReactHighcharts 不工作。

有没有人有建议或可以提供帮助？

感谢您提供的任何帮助。

07/14 更新

代码:

import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';

class Demo extends Component {
  constructor (props) {
    super(props);
    HighchartsMore(ReactHighcharts.Highcharts);
    SolidGauge(ReactHighcharts.Highcharts);
  }
  render () {
    return (
      <ReactHighcharts config={
      multiChartsConfig(460,60,40,10,'Total','Sent')}></ReactHighcharts>
    );
  }
}

const multiChartsConfig = (value, open, click, placement, str1, str2) => {
  return {
    chart: {
        type: 'solidgauge',
        height: 180,
        width: 185,
        marginTop: 10,
        marginBottom: 0,
        style: { margin: 'auto' }
    },
    title: null,
    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [
          {
            backgroundColor: '#D8D8D8',
            outerRadius: '110%',
            innerRadius: '100%',
            borderWidth: 0
          },{
            backgroundColor: '#D8D8D8',
            outerRadius: '93%',
            innerRadius: '83%',
            borderWidth: 0
          },{
            backgroundColor: '#D8D8D8',
            outerRadius: '76%',
            innerRadius: '66%',
            borderWidth: 0
          }
        ]
    },
    tooltip:     {
        enabled: false
    },
    // the value axis
    yAxis: {
      min: 0,
      max: 100,
      lineWidth: 0,
      tickPositions: []
    },
    plotOptions: {
      solidgauge: {
        borderWidth: '34px',
        dataLabels: {
          enabled: true,
          borderWidth: 0,
          y: -30,
          useHTML: true,
          formatter: () => {
            return (`
              <div style="text-align: center;font-size:15px;color: #777777;">
              <div style="color: #009fc5;font-size: 17px;">${value.toLocaleString()}</div><div>${str1}</div><div>${str2}</div>
              </div>
            `);
          }
        },
        linecap: 'round',
        rounded: true,
        stickyTracking: false
      }
    },
    credits:     {
        enabled: false
    },
    series: [
      {
        name: 'open',
        rounded: true,
        data: [{
          color: '#009fc5',
          radius: '110%',
          innerRadius: '100%',
          y: Math.round(open * 100) 
        }]
      },
      {
        name: 'click',
        data: [{
          color: 'green',
          radius: '93%',
          innerRadius: '83%',
          y: Math.round(click * 100) 
        }]
      },
      {
        name: 'placement',
        data: [{
          color: 'red',
          radius: '76%',
          innerRadius: '66%',
          y: Math.round(placement * 100) 
        }]
      }
    ]
  };
}

Answer 1

问题在于您从哪里获得实心仪表扩展。 highcharts-solid-gauge 包已经严重过时了。

改用这个

import SolidGauge from 'highcharts/modules/solid-gauge';

您使用的版本(参见 https://npmcdn.com/highcharts-solid-gauge@latest)是 v4.2.3

当前版本是 v5.0.12 - https://code.highcharts.com/modules/solid-gauge.js

如果您转到您引用的官方 JSFiddle 示例，并将 solid-gauge 脚本 src 更改为 https://npmcdn.com/highcharts-solid-gauge@latest，您将看到与您遇到的问题相同。