I need to do some kind of animation using jquery/javascript html5, css3. Not sure it is possible or not. I have created three divs with three bubble charts. I need to draw arrow line from one div(from bubble to next div) dynamically.
And my expectation is need to draw arrow line dynamically from one bubble to another.
I am using Highcharts.js bubble chart.
My code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<figure >
<div >
<div >
<div >
<div id="container1" ></div>
</div>
<div >
<div id="container2"></div>
</div>
</div>
</div>
</figure>
<style>
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container1 {
height: 500px;
height: 300px;
width:300px;
border: 1px solid black;
}
#container2 {
height: 300px;
width:300px;
border: 1px solid black;
}
.highcharts-tooltip h3 {
margin: 0.3em 0;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
<script>
Highcharts.chart('container1', {
chart: {
type: 'bubble',
plotBorderWidth: 0,
//zoomType: 'xy',
height: '100%'
},
legend: {
enabled: false
},
title: {
text: 'first'
},
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
text: ''
},
},
yAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
text: ''
},
},
accessibility: {
point: {
valueDescriptionFormat: '{point.name}'
}
},
tooltip: {
useHTML: true,
//headerFormat: '<table>',
formatter: function() {
return '<b>' (this.point ? this.point.days : this.series.name) '</b><br/>';
},
//footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
},
}
},
series: [{
data: [
{ days: 95, y: 82.9, z: 3.7, name: 'A1', appName: 'A1' },
{ days: 86.5, y: 102.9, z: 14.7, name: 'B1', appName: 'B1' },
{ days: 80.8, y: 91.5, z: 15.8, name: 'C1', appName: 'C1' },
{ days: 80.4, y: 102.5, z: 12, name: 'D1', appName: 'D1' },
{ days: 80.3, y: 86.1, z: 11.8, name: 'E1', appName: 'E1'},
{ days: 78.4, y: 70.1, z: 16.6, name: 'F1', appName: 'F1' },
{ days: 74.2, y: 68.5, z: 14.5, name: 'G1', appName: 'G1' },
{ days: 73.5, y: 83.1, z: 10, name: 'H1', appName: 'H1' }
],
className: "first"
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bubble',
//plotBorderWidth: 0,
//zoomType: 'xy',
height: '100%'
},
legend: {
enabled: false
},
title: {
text: 'second'
},
// subtitle: {
// text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
// },
accessibility: {
point: {
valueDescriptionFormat: '{point.name}'
}
},
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
text: ''
},
},
yAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
text: ''
},
},
tooltip: {
useHTML: true,
//headerFormat: '<table>',
//pointFormat: '<tr><th colspan="2"><h3>{point.appName}</h3></th></tr>'
// '<tr><th>No of Days:</th><td>{point.days} days</td></tr>',
//footerFormat: '</table>',
//headerFormat: '<table>',
formatter: function() {
return '<b>' (this.point ? this.point.days : this.series.name) '</b><br/>';
},
//footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [
{ days: 21, y: 102.9, z: 14.7, name: 'A2', appName: 'A2' },
{ days: 12, y: 102.9, z: 14.7, name: 'B2', appName: 'B2' },
{ days: 8, y: 91.5, z: 15.8, name: 'C2', appName: 'C2'},
{ days: 2, y: 102.5, z: 12, name: 'D2', appName: 'D2' },
{ days: 43, y: 86.1, z: 11.8, name: 'E2', appName: 'E2' },
{ days: 1, y: 70.1, z: 8.6, name: 'F2', appName: 'F2' },
{ days: 6, y: 68.5, z: 14.5, name: 'G2', appName: 'G2' },
{ days: 73.5, y: 83.1, z: 10, name: 'H2', appName: 'H2' }
],
className: "second"
}]
});
</script>
CodePudding user response：
You can create the diagram by using only one Highcharts chart. Each section can be a separate x-axis and y-axis:
yAxis: [{
...
}, {
...
}, {
offset: 0,
lineWidth: 1,
height: '40%',
top: '60%',
left: '20%',
width: '60%',
title: null
}],
xAxis: [{
...
}, {
...
}, {
offset: 0,
width: '60%',
left: '20%',
height: '40%',
top: '60%'
}]
Then, with the help of Highcharts.SVGRenderer class in render event, draw the required connections by using values stored in the chart.
chart: {
type: 'bubble',
events: {
render: function() {
const chart = this;
const series = chart.series;
const yAxis3 = chart.yAxis[2];
const p1 = series[0].points[0];
if (!p1.customLink) {
// create the connection only at first render
p1.customLink = chart.renderer.path().attr({
...
}).add();
}
// update the connection dimensions on each render
p1.customLink.attr({
d: [
...
]
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/r7p2t4j6/
Docs: https://www.highcharts.com/docs/advanced-chart-features/freeform-drawing
API Reference:
https://api.highcharts.com/highcharts/yAxis
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path