reactjs - Highcharts 的仪表系列与 react 不是固体仪表而是仪表系列

Question

https://www.highcharts.com/demo/gauge-speedometer

在 React 中需要这个图表。实现了 Solid Gauge，但无法实现此 Gauge 系列。

这是供引用的沙箱，其中实体量规正在工作，但系列图不起作用。取消注释 GaugeSeries 会导致出现空错误的工具提示。

https://codesandbox.io/s/38rk6wvnrq

Answer 1

您的plotOptions应该是

中图表选项的一部分

  <HighchartsChart
    chart=

我建议更改变量的名称，这样就不会产生误导 - 例如到 chartOptions。

第二，最重要的问题是由拼写错误引起的 - 系列类型是 gauge 而不是 guage:

      <Series id="series" name="Value" data={[80]} type="guage" />

基于代码:

import React, { Component } from "react";
import Highcharts from "highcharts";
require("highcharts/highcharts-more")(Highcharts);
require("highcharts/modules/exporting")(Highcharts);

import {
  HighchartsChart,
  withHighcharts,
  Series,
  XAxis,
  YAxis,
  Tooltip
} from "react-jsx-highcharts";

const plotOptions = {
  plotBackgroundColor: null,
  plotBackgroundImage: null,
  plotBorderWidth: 0,
  plotShadow: false
};

const paneOptions = {
  startAngle: -120,
  endAngle: 120,
  background: [
    {
      backgroundColor: {
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: [[0, "#FFF"], [1, "#333"]]
      },
      borderWidth: 0,
      outerRadius: "109%"
    },
    {
      backgroundColor: {
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: [[0, "#333"], [1, "#FFF"]]
      },
      borderWidth: 1,
      outerRadius: "107%"
    },
    {
      backgroundColor: "#DDD",
      borderWidth: 0,
      outerRadius: "105%",
      innerRadius: "103%"
    }
  ]
};

const GraphRender = ({ data }) => {
  return (
    <div className="gauge-empty">
      <div className="no-data">Data Unavaialble</div>
      <HighchartsChart
        chart={{ type: "gauge" }}
        plotOptions={plotOptions}
        pane={paneOptions}
      >
        <Tooltip padding={10} hideDelay={250} shape="square" />

        <XAxis />

        <YAxis
          id="myAxis"
          min={0}
          max={100}
          minorTickInterval="auto"
          minorTickWidth={1}
          minorTickLength={10}
          minorTickPosition="inside"
          minorTickColor="#666"
          tickPixelInterval={30}
          tickWidth={2}
          tickPosition="inside"
          tickLength={10}
          tickColor="#666"
          labels={{
            step: 2,
            rotation: "auto"
          }}
          title={{
            text: ""
          }}
          plotBands={[
            {
              from: 0,
              to: 60,
              color: "#55BF3B" // green
            },
            {
              from: 60,
              to: 80,
              color: "#DDDF0D" // yellow
            },
            {
              from: 80,
              to: 100,
              color: "#DF5353" // red
            }
          ]}
        >
          <Series id="series" name="Value" data={[80]} type="guage" />
        </YAxis>
      </HighchartsChart>
    </div>
  );
};

const Gauge = ({ data }) => <GraphRender data={data} />;

export default withHighcharts(Gauge, Highcharts);

(我还没有解决图表选项的问题 - 如果您希望它们工作，您可以将选项移动到正确的位置。我不确定您是否需要它们，或者这些选项是否仅针对演示目的)