我有一个完整的图形定义到本地的json文件中，就像下面。
{
"data":[
{
"x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
"y": [0, 3, 6, 4, 5, 2, 3, 5, 4],
"type": "scatter",
"name":"Plot 1"
},
{
"x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
"y": [0, 4, 7, 8, 3, 6, 3, 3, 4],
"type": "scatter",
"name":"Plot 2"
},
{
"x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
"y": [0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2],
"type": "scatter",
"name":"Plot 3"
}
],
"layout":{
"showlegend": true,
"legend": {"orientation": "h"}
}
}
我需要做的就是将json数据传入Plotly。这是我的反应代码。
import React, { Component } from "react";
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);
class ThresholdAnalysis extends Component{
render(){
const dataJson = require('../assets/plotly_vars.json');
const data = dataJson;
var graph = JSON.parse(myData);
return(
<div>
<Plot data={graph.data} layout={figure.layout} />
</div>
);
}
}
export default ThresholdAnalysis;
我能够用下面的代码在原始javascript中完成这个任务。
<body>
<div id="plotly-chart"></div>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var plotly_vars = JSON.parse(this.responseText);
Plotly.newPlot('plotly-chart', plotly_vars['data'], plotly_vars['layout']);
}
};
xmlhttp.open("GET", "plotly_vars.json", true);
xmlhttp.send();
</script>
</body>
我是新的反应和剧情。因此，任何形式的建议或帮助将被感激。
你应该可以在组件的顶部导入数据，就像你在下面做的那样。React, Plotly等，使用下面的导入。
import * as graph from "../assets/plotly_vars.json";
然后在你的组件中，你可以使用变量 graph 因为你已经即 graph.data 会给你数据数组。
例子:
import React, { Component } from "react";
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
import * as graph from "../assets/plotly_vars.json";
const Plot = createPlotlyComponent(Plotly);
class ThresholdAnalysis extends Component{
render(){
return(
<div>
<Plot data={graph.data} layout={figure.layout} />
</div>
);
}
}
export default ThresholdAnalysis;
如何导入json到TypeScript中SO回答 对于。ecmascript 6中如何导入json文件？
请注意，这是假设你的数据文件总是在你的 ../assets 目录。因此，如果你需要改变所呈现的数据，你就需要重新部署你的react应用。如果使用某种fetch来从远程服务器上检索数据，会更加动态。