Run
Auto Run
const COLORS = [ '#4dc9f6', '#f67019', '#f53794', '#537bc4', '#acc236', '#166a8f', '#00a950', '#58595b', '#8549ba' ]; define('my-app', class extends WeElement { install(){ this.chartData = { datasets: [{ label: 'My First dataset', data: [ { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() } ] }, { label: 'My Second dataset', data: [ { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() }, { x: rd(), y: rd(), v: rd() } ] }] } this.chartOptions = { 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 COLORS[context.datasetIndex%COLORS.length] }, 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) / 100; return (size / 24) * base; } } } }; } render(props, data) { return (
) } }) render(
, 'body') function rd(){ return Math.random() * 200 - 100 } 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 + ')' }