json - Highcharts 官方 + React,来自 JSON 的系列人口?
问题描述
我在用 Highcharts 替换项目中的当前图表时遇到了一些问题。我正在使用 highcharts-react-official(和 highcharts)NPM 包,它不会从响应中呈现“一切”。
该项目非常大,并且通过旧的图表实现来看,Rechart 似乎非常简单。从 API 响应中获取的当前数据是这样的(在 ComposedChart 包装器中):
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
}
这类作品。控制台日志确实打印了特定值,但如果我在系列中尝试它,比如 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 中的类别)会发生变化,正如预期的那样。所以这看起来像我需要走的路,但我如何让数据可见?我错过了什么?
解决方案
当数据尚未下载时,您可能正在尝试创建图表。请看下面的示例,您可以了解如何使用动态数据创建图表:
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"));
推荐阅读
- java - 我想返回一个字符串数组列表,其中包含响应代码为 200 的响应中的用户名
- c# - 如何对字符组使用 LINQ Like 函数?
- python - 如何解决“没有名为 mysqldb 的模块”?
- javascript - 需要找出数组的平均值
- wildfly - Wildfly 8.1 与 Openjdk 的兼容性
- sql-server - 是否有一个简单的脚本来“复制/克隆”同一台服务器上的 SQL Server 数据库?
- ms-access - 识别缺少时间的日期时间戳
- java - 将数组值从 JPA/Hibernate 传递给 PostgreSQL
- c# - 有没有办法通过传入类型的字符串值来编写 FindElement 调用
- ios - 在运行时在 Unity 中请求 iOS 上的相机权限