mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
872dfec0f3
New `options.resolve` helper that determines the final value to use from an array of input values (fallback) and a given context and/or index. For now, only the bubble chart support scriptable options, see documentation for details. Add scriptable options documentation and update the bubble chart dataset properties table with their scriptable and indexable capabilities and default values. Also move point style description under the element configuration section.
130 lines
2.9 KiB
HTML
130 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Scriptable > Bubble | Chart.js sample</title>
|
|
<link rel="stylesheet" type="text/css" href="../style.css">
|
|
<script src="../../dist/Chart.js"></script>
|
|
<script src="../utils.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="content">
|
|
<div class="wrapper"><canvas id="chart-0"></canvas></div>
|
|
<div class="toolbar">
|
|
<button onclick="randomize(this)">Randomize</button>
|
|
<button onclick="addDataset(this)">Add Dataset</button>
|
|
<button onclick="removeDataset(this)">Remove Dataset</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var DATA_COUNT = 16;
|
|
var MIN_XY = -150;
|
|
var MAX_XY = 100;
|
|
|
|
var presets = window.chartColors;
|
|
var utils = Samples.utils;
|
|
|
|
utils.srand(110);
|
|
|
|
function colorize(opaque, context) {
|
|
var value = context.dataset.data[context.dataIndex];
|
|
var x = value.x / 100;
|
|
var y = value.y / 100;
|
|
var r = x < 0 && y < 0 ? 250 : x < 0 ? 150 : y < 0 ? 50 : 0;
|
|
var g = x < 0 && y < 0 ? 0 : x < 0 ? 50 : y < 0 ? 150 : 250;
|
|
var b = x < 0 && y < 0 ? 0 : x > 0 && y > 0 ? 250 : 150;
|
|
var a = opaque ? 1 : 0.5 * value.v / 1000;
|
|
|
|
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
|
|
}
|
|
|
|
function generateData() {
|
|
var data = [];
|
|
var i;
|
|
|
|
for (i = 0; i < DATA_COUNT; ++i) {
|
|
data.push({
|
|
x: utils.rand(MIN_XY, MAX_XY),
|
|
y: utils.rand(MIN_XY, MAX_XY),
|
|
v: utils.rand(0, 1000)
|
|
});
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
var data = {
|
|
datasets: [{
|
|
data: generateData()
|
|
}, {
|
|
data: generateData()
|
|
}]
|
|
};
|
|
|
|
var options = {
|
|
aspectRatio: 1,
|
|
legend: false,
|
|
tooltips: false,
|
|
|
|
elements: {
|
|
point: {
|
|
backgroundColor: colorize.bind(null, false),
|
|
|
|
borderColor: colorize.bind(null, true),
|
|
|
|
borderWidth: function(context) {
|
|
return Math.min(Math.max(1, context.datasetIndex + 1), 8);
|
|
},
|
|
|
|
hoverBackgroundColor: 'transparent',
|
|
|
|
hoverBorderColor: function(context) {
|
|
return utils.color(context.datasetIndex);
|
|
},
|
|
|
|
hoverBorderWidth: function(context) {
|
|
var value = context.dataset.data[context.dataIndex];
|
|
return Math.round(8 * value.v / 1000);
|
|
},
|
|
|
|
radius: function(context) {
|
|
var value = context.dataset.data[context.dataIndex];
|
|
var size = context.chart.width;
|
|
var base = Math.abs(value.v) / 1000;
|
|
return (size / 24) * base;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = new Chart('chart-0', {
|
|
type: 'bubble',
|
|
data: data,
|
|
options: options
|
|
});
|
|
|
|
function randomize() {
|
|
chart.data.datasets.forEach(function(dataset) {
|
|
dataset.data = generateData()
|
|
});
|
|
chart.update();
|
|
}
|
|
|
|
function addDataset() {
|
|
chart.data.datasets.push({
|
|
data: generateData()
|
|
});
|
|
chart.update();
|
|
}
|
|
|
|
function removeDataset() {
|
|
chart.data.datasets.shift();
|
|
chart.update();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|