Javascript 如何在Reactjs上实现运动视频highchart

我能够使用highchart库制作气泡图。但我们有没有办法对其实施动议

示例链接如下

我的问题是motions.js和bubble.js是外部文件。在react中，我们使用render方法来渲染highchart

下面的状态选项将具有运动对象和序列，如下所示

       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: [20181031, 20181101, 20181102, 20181103, 20181104, 20181105, 20181106, 20181107, 20181108, 20181109, 20181110, 20181111, 20181112, 20181113]
        },
        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:  [{ "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 38.42, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 38.17, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 38.75, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.92, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.08, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.75, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.83, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.5, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 38.08, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 36.92, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 13, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 36, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 13, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 13, "y": 0, "z": 6, "name": "California" }] 
        }]

  return (
        <div>
            <Highcharts
                config={this.state.options}
            />
        </div>
    );

运动：{
启用：对，
Axis标签：“年”，
循环：false，
序列：0，//保存要更新的点的序列
更新间隔：100，
磁铁：{
圆形：“圆形”，//天花板/地板/圆形
步骤：0.1
},
标签：[20181031、20181101、20181102、20181103、20181104、20181105、20181106、20181107、20181108、20181109、20181110、20181111、20181112、20181113]
},
系列：[{
名称：'事物'，
colorByPoint：对，
id:'深'，
标记：{
填充颜色：{
径向梯度：{cx:0.4，cy:0.3，r:0.7}，
停止：[
[0，‘rgba（255255,0.5）’]
]
}
},
数据：[{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，67，72，0.5）”，“x”：38.42，“y”：0，“z”：6，“名称”：“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，67，72，0.5）”，“x”：38.17，“y”：0，“z”：6，“名称”：“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，72，72，0.75）”，“填充颜色”：“0.75”：0，“z”：6，“名称”：“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，67，72，0.5）”，“x”：37.92，“y”：0，“z”：6，“名称”：“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，67，72，0.5）”，“x”：37.08，“y”：0，“z”：6，“名称”：“加利福尼亚州”{，“颜色”：“rgba（67，67，72，72，0（67，67，72，0.5），“x”：37.75，“y”：0，“z”：6，“名称”：“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，67，72，0.5）”，“x”：37.83，“y”：0，“z”：6，“名称”：“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，67，72，72，0.5）”，“x”：37.5，“y”：0，“z”：6，“名称”：“加利福尼亚州”{“颜色”：（67，67，72，0.5）”，“fillColor”：“rgba（67，67，72，0.5）”，“x”：38.08，“y”：0，“z”：6，“名称”：“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“fillColor”：“rgba（67，67，72，0.5）”，“x”：36.92，“y”：0，“z”：6，“名称”：“加利福尼亚州”，{“颜色”：“rgba（67，67，67，72，72，0.5）”，“fillColor”：“BA（67，72，72，72，72，0.5）”，“fillColor”：“rgba（67，72，72，72，72，0.5）”，“Rgbolor”：“名称”：“加州”；“Rgbolor”：“0”，6”：“Rgboar“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，67，72，0.5）”，“x”：36，“y”：0，“z”：6，“名称”：“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，67，72，0.5）”，“x”：13，“y”：0，“z”：6，“名称”：“加利福尼亚州”}，{“颜色”：“rgba（67，67，72，0.5）”，“填充颜色”：“rgba（67，72，72，0.5）”，“填充颜色”：“0“：0，“z”：6，“名称”：“加利福尼亚”}]
}]
返回(
);

我建议您使用

highcharts-react-official

包装器：

通过使用此包装器，您可以轻松地添加其他插件或模块

现场演示：