mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
55128f74c1
In order to be compatible with any CSP, we need to prevent the automatic creation of the DOM 'style' element and offer our CSS as a separate file that can be manually loaded (`Chart.js` or `Chart.min.js`). Users can now opt-out the style injection using `Chart.platform.disableCSSInjection = true` (note that the style sheet is now injected on the first chart creation). To prevent duplicating and maintaining the same CSS code at different places, move all these rules in `platform.dom.css` and write a minimal rollup plugin to inject that style as string in `platform.dom.js`. Additionally, this plugin extract the imported style in `./dist/Chart.js` and `./dist/Chart.min.js`.
55 lines
1006 B
JavaScript
55 lines
1006 B
JavaScript
var utils = Samples.utils;
|
|
|
|
// CSP: disable automatic style injection
|
|
Chart.platform.disableCSSInjection = true;
|
|
|
|
utils.srand(110);
|
|
|
|
function generateData() {
|
|
var DATA_COUNT = 16;
|
|
var MIN_XY = -150;
|
|
var MAX_XY = 100;
|
|
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;
|
|
}
|
|
|
|
window.addEventListener('load', function() {
|
|
new Chart('chart-0', {
|
|
type: 'bubble',
|
|
data: {
|
|
datasets: [{
|
|
backgroundColor: utils.color(0),
|
|
data: generateData()
|
|
}, {
|
|
backgroundColor: utils.color(1),
|
|
data: generateData()
|
|
}]
|
|
},
|
|
options: {
|
|
aspectRatio: 1,
|
|
legend: false,
|
|
tooltip: false,
|
|
elements: {
|
|
point: {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|