Я могу сделать пузырьковую диаграмму, используя библиотеку highchart.Но есть ли способ, которым мы можем реализовать движение к нему.
Пример ссылки ниже
http://jsfiddle.net/gh/get/library/pure/larsac07/Motion-Highcharts-Plugin/tree/master/demos/map-australia-bubbles-demo/
Моя проблема - motions.js и bubble.js - внешние файлы.Здесь в реакции мы используем метод рендеринга для рендеринга старшей диаграммы.
Параметры ниже состояния будут иметь объект движения и серию, как показано ниже
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>
);