158 lines
5.4 KiB
HTML
158 lines
5.4 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>Highcharts Example</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||
|
|
<style type="text/css">
|
||
|
|
.chart {
|
||
|
|
min-width: 320px;
|
||
|
|
max-width: 800px;
|
||
|
|
height: 220px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<style>
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
/*
|
||
|
|
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
|
||
|
|
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
|
||
|
|
small variation for each data set, and a mouse/touch event handler to bind the charts together.
|
||
|
|
*/
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* In order to synchronize tooltips and crosshairs, override the
|
||
|
|
* built-in events with handlers defined on the parent element.
|
||
|
|
*/
|
||
|
|
$('#container').bind('mousemove touchmove touchstart', function (e) {
|
||
|
|
var chart,
|
||
|
|
point,
|
||
|
|
i,
|
||
|
|
event;
|
||
|
|
|
||
|
|
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
|
||
|
|
chart = Highcharts.charts[i];
|
||
|
|
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
|
||
|
|
point = chart.series[0].searchPoint(event, true); // Get the hovered point
|
||
|
|
|
||
|
|
if (point) {
|
||
|
|
point.onMouseOver(); // Show the hover marker
|
||
|
|
chart.tooltip.refresh(point); // Show the tooltip
|
||
|
|
chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* Override the reset function, we don't need to hide the tooltips and crosshairs.
|
||
|
|
*/
|
||
|
|
Highcharts.Pointer.prototype.reset = function () {
|
||
|
|
return undefined;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Synchronize zooming through the setExtremes event handler.
|
||
|
|
*/
|
||
|
|
function syncExtremes(e) {
|
||
|
|
var thisChart = this.chart;
|
||
|
|
|
||
|
|
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
|
||
|
|
Highcharts.each(Highcharts.charts, function (chart) {
|
||
|
|
if (chart !== thisChart) {
|
||
|
|
if (chart.xAxis[0].setExtremes) { // It is null while updating
|
||
|
|
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Get the data. The contents of the data file can be viewed at
|
||
|
|
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
|
||
|
|
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
|
||
|
|
$.each(activity.datasets, function (i, dataset) {
|
||
|
|
|
||
|
|
// Add X values
|
||
|
|
dataset.data = Highcharts.map(dataset.data, function (val, j) {
|
||
|
|
return [activity.xData[j], val];
|
||
|
|
});
|
||
|
|
|
||
|
|
$('<div class="chart">')
|
||
|
|
.appendTo('#container')
|
||
|
|
.highcharts({
|
||
|
|
chart: {
|
||
|
|
marginLeft: 40, // Keep all charts left aligned
|
||
|
|
spacingTop: 20,
|
||
|
|
spacingBottom: 20
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: dataset.name,
|
||
|
|
align: 'left',
|
||
|
|
margin: 0,
|
||
|
|
x: 30
|
||
|
|
},
|
||
|
|
credits: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
crosshair: true,
|
||
|
|
events: {
|
||
|
|
setExtremes: syncExtremes
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
format: '{value} km'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
title: {
|
||
|
|
text: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
positioner: function () {
|
||
|
|
return {
|
||
|
|
x: this.chart.chartWidth - this.label.width, // right aligned
|
||
|
|
y: -1 // align to title
|
||
|
|
};
|
||
|
|
},
|
||
|
|
borderWidth: 0,
|
||
|
|
backgroundColor: 'none',
|
||
|
|
pointFormat: '{point.y}',
|
||
|
|
headerFormat: '',
|
||
|
|
shadow: false,
|
||
|
|
style: {
|
||
|
|
fontSize: '18px'
|
||
|
|
},
|
||
|
|
valueDecimals: dataset.valueDecimals
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
data: dataset.data,
|
||
|
|
name: dataset.name,
|
||
|
|
type: dataset.type,
|
||
|
|
color: Highcharts.getOptions().colors[i],
|
||
|
|
fillOpacity: 0.3,
|
||
|
|
tooltip: {
|
||
|
|
valueSuffix: ' ' + dataset.unit
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||
|
|
|
||
|
|
<div id="container"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|