我要像下面那样设置我的系列。
import React, { Component } from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import "../../../../resources/js/motion";
import HC_more from "highcharts/highcharts-more"; //module
import * as Services from '../../services/dashboardservices';
import ProcessData from './bubbleChartMethods';
require("highcharts/modules/map")(Highcharts);
HC_more(Highcharts); //init module
class BubbleContainer extends Component {
style = {
fontFamily: "'univers', Arial, sans-serif",
fontSize: 14,
color: "#333333"
};
state = {
options: {
chart: {
height: 380,
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
resetZoomButton: {
theme: {
states: {
hover: {
fill: '#D98C14',
stroke: '#BF7400',
}
}
}
}
},
credits: {
enabled: false
},
title: "",
legend: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},
plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels: []
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data: []
}]
}
}
// Render app with demo chart
componentDidMount() {
Services.getLoadAndUnbalanceData().then(res => {
const renderObj = ProcessData(res);
this.setState({
options: {
...this.state.options,
motion: {
...this.state.options.motion,
labels: renderObj.timestamp
},
series: [{
...this.state.options.series[0],
data: [{
sequence: [...renderObj.series[0].sequence]
}]
}],
xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}
如果我直接放置数据，则将加载highchart。
我正在获取如下数据。
[{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]
我已经在上面完成了整个课程。
如果我直接将系列数据放到setState中，highchart将被加载。但是，如果我使用动态数据是从响应中获得的，那么highchart不会将wrt加载到数据。
我正在渲染如下图的高图。
<HighchartsReact
highcharts={Highcharts}
options={this.state.options}
constructorType={"chart"}
/>
我的问题是我是否使用setState图表不呈现来动态更改数据。是什么原因。
但是，如果我调试渲染，则setState之后所有数据都可用。但是highchart并没有为系列变更带来回报。