Question

在用Highcharts替换项目中的当前图表时，我遇到一些问题。我使用的是highcharts-react-official（和highcharts）NPM软件包，它不会呈现响应中的“所有内容”。

该项目相当大，通过旧的图表实现来看，使用Rechart似乎非常简单。从API响应中获取的当前数据是这样的（在ComposedChart包装器中）：

data={chartData}

然后显示所有必需的数据。我希望这将是一次简单的交换，并且以相同的方式填充Highcharts，但事实并非如此。

在return方法中，我有这个：

<HighchartsReact
 highcharts={Highcharts}
 options={options}
/>

在我的render方法中，我的选择是：

const options = {

  chart: {
    events: {
        load: function () {
          console.log(JSON.stringify(chartData[2].value))
        }
      }
    },
  title: {
    text: ''
  },
  series: {
        name: 'test',
        data: chartData
  }

这类作品。控制台日志确实会打印特定的值，但是如果我在系列中尝试使用此值，例如data：chartData [2] .value，它将无法正常工作。使用data：chartData时，它确实显示对象中正确的条目数量，作为类别（在这种情况下为6个不同的条目），但仅此而已。是解析错误还是怎么了？

谢谢！

-

编辑：

好吧，这就是现在的样子，并且可以正常工作。

chart: {
    events: {
      load: () => {
        this.state.testChart.map(data =>
        testData.push({
          name: data.time,
          x: data.temp,
          y: data.value
        })
      );
        this.setState({ data: testData });
      }
    }
  },

在我的系列文章中：

  series: [{
    type: 'column',
    name: 'Current year',
    data: testData
  },

视觉结果是Highcharts将响应中给我的所有6个对象添加到数组中（显示6个类别）。但不会显示这6个条目中的任何数据。看起来像这样：

[
 {time: "2018-10-11", temp: "21", value: "10"}, 
 {time: "2018-10-10", temp: "12", value: "31"}
]

同时，当更改时间跨度（例如，单击按钮以显示上周在HC之外处理testChart的按钮）时，这6个条目（以及HC中的类别）将按预期更改。因此，这看起来像我需要采取的方法，但是如何使数据可见？我想念什么？

Answer 1

您可能正在尝试在尚未下载数据时创建图形。请看下面的示例，您将看到如何使用动态数据创建图表：

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    fetch("https://api.myjson.com/bins/q4us4")
      .then(response => response.json())
      .then(data => {
        options.series[0].data = data;
        this.setState({ data: data });
      });
  }

  render() {
    return (
      <div>
        {this.state &&
          this.state.data && (
            <Chart options={options} highcharts={Highcharts} ref={"chart"} />
          )}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

实时演示：https://codesandbox.io/s/mz35zwxjoj

Highcharts官方+ React，来自JSON的系列人口？

1 个答案: