Introduce scriptable options (bubble chart) (#4671)

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.
2026-03-19 06:36:51 +01:00 · 2017-08-24 09:34:38 +02:00
parent 46c3b2406e
commit 872dfec0f3
15 changed files with 611 additions and 243 deletions
--- a/samples/scriptable/bubble.html
+++ b/samples/scriptable/bubble.html
@@ -0,0 +1,129 @@
+<!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>