|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
|
|
|
|
<meta content="utf-8" http-equiv="encoding">
|
|
|
|
|
|
|
|
|
|
<script src="../dist/index.dev.js" type="text/javascript"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="chart" style="width: 500px; height: 500px;"></div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
const datapoints1 = [
|
|
|
|
|
[100, -50, 0],
|
|
|
|
|
[200, 150, 0],
|
|
|
|
|
[100, 160, 1],
|
|
|
|
|
[150, 170, 1],
|
|
|
|
|
[150, 180, 0],
|
|
|
|
|
[150, 250, 1]
|
|
|
|
|
];
|
|
|
|
|
var pod = new ChartwerkScatterPod(
|
|
|
|
|
document.getElementById('chart'),
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
target: 'test1',
|
|
|
|
|
datapoints: datapoints1,
|
|
|
|
|
color: 'red',
|
|
|
|
|
lineType: 'dashed',
|
|
|
|
|
pointType: 'circle',
|
|
|
|
|
colorFormatter: (values, idx) => datapoints1[idx][2] === 0 ? 'blue' : 'green',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
target: 'test2',
|
|
|
|
|
datapoints: [
|
|
|
|
|
[200, 50, 1],
|
|
|
|
|
[175, 60, 0],
|
|
|
|
|
[150, 70, 1]
|
|
|
|
|
],
|
|
|
|
|
color: 'purple',
|
|
|
|
|
pointType: 'rectangle',
|
|
|
|
|
pointSize: 5,
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
{
|
|
|
|
|
axis: {
|
|
|
|
|
x: {
|
|
|
|
|
format: 'numeric',
|
|
|
|
|
range: [-100, 300]
|
|
|
|
|
},
|
|
|
|
|
y: {
|
|
|
|
|
invert: true,
|
|
|
|
|
range: [-100, 250]
|
|
|
|
|
},
|
|
|
|
|
y1: {
|
|
|
|
|
isActive: true,
|
|
|
|
|
range: [0, 250]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
zoomEvents: {
|
|
|
|
|
mouse: {
|
|
|
|
|
pan: { isActive: false, orientation: 'both', keyEvent: 'main' },
|
|
|
|
|
zoom: { isActive: true, keyEvent: 'shift' },
|
|
|
|
|
},
|
|
|
|
|
scroll: {
|
|
|
|
|
pan: { isActive: false },
|
|
|
|
|
zoom: { isActive: true, keyEvent: 'main' }
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
crosshair: {
|
|
|
|
|
orientation: 'both',
|
|
|
|
|
color: 'gray'
|
|
|
|
|
},
|
|
|
|
|
labelFormat: {
|
|
|
|
|
yAxis: 'y',
|
|
|
|
|
xAxis: 'x'
|
|
|
|
|
},
|
|
|
|
|
eventsCallbacks: {
|
|
|
|
|
zoomOut: () => { pod.render() }
|
|
|
|
|
},
|
|
|
|
|
margin: { top: 30, right: 30, bottom: 40, left: 30 },
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
pod.render();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.overlay {
|
|
|
|
|
fill: black;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
