Highcharts官方React，来自JSON的系列人口？-Java 学习之路

我在使用Highcharts替换项目中的当前图表时遇到了一些问题 . 我正在使用highcharts-react-official（和highcharts）NPM包，它不会从响应中呈现“一切” .

该项目非常庞大，通过旧的图表实现，它似乎与Rechart相当直接 . 从API响应获取的当前数据是这样的（在ComposedChart-wrapper中）：

data={chartData}

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

在返回方法中我有这个：

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

我在渲染方法中的选项我有这个：

const options = {

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

这种作品 . 控制台日志会打印特定值，但是如果我在系列中尝试它，就像数据：chartData [2] .value它不起作用 . 在使用数据时：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"}
]

同时，当更改时间 Span （例如，单击按钮以显示处理HC外的testChart的前一周）时，这6个条目（以及HC中的类别）会发生变化，正如预期的那样 . 所以这看起来像我需要的方式，但我如何使数据可见？我错过了什么？

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

回复于 2024-04-30T05:21:52+08:00

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

1 回答

相关问题