Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-11 18:56:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Float bars: data as objects (#6739)

Browse Source 
Float bars can be specified in object data points
This commit is contained in:
Jukka Kurkela
2019-11-15 15:40:45 +02:00
committed by Evert Timberg
parent c12ca17e38
commit 931d686adb
9 changed files with 239 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
samples/charts/bar/float.html Normal file
View File

@@ -0,0 +1,143 @@
<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<script>
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var color = Chart.helpers.color;
var barChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
borderWidth: 1,
data: [
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()]
]
}, {
label: 'Dataset 2',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
borderWidth: 1,
data: [
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()],
[randomScalingFactor(), randomScalingFactor()]
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
});
};
document.getElementById('randomizeData').addEventListener('click', function() {
var zero = Math.random() < 0.2 ? true : false;
barChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return zero ? 0.0 : [randomScalingFactor(), randomScalingFactor()];
});
});
window.myBar.update();
});
var colorNames = Object.keys(window.chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
var colorName = colorNames[barChartData.datasets.length % colorNames.length];
var dsColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + (barChartData.datasets.length + 1),
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
borderColor: dsColor,
borderWidth: 1,
data: []
};
for (var index = 0; index < barChartData.labels.length; ++index) {
newDataset.data.push([randomScalingFactor(), randomScalingFactor()]);
}
barChartData.datasets.push(newDataset);
window.myBar.update();
});
document.getElementById('addData').addEventListener('click', function() {
if (barChartData.datasets.length > 0) {
var month = MONTHS[barChartData.labels.length % MONTHS.length];
barChartData.labels.push(month);
for (var index = 0; index < barChartData.datasets.length; ++index) {
barChartData.datasets[index].data.push([randomScalingFactor(), randomScalingFactor()]);
}
window.myBar.update();
}
});
document.getElementById('removeDataset').addEventListener('click', function() {
barChartData.datasets.pop();
window.myBar.update();
});
document.getElementById('removeData').addEventListener('click', function() {
barChartData.labels.splice(-1, 1); // remove the label first
barChartData.datasets.forEach(function(dataset) {
dataset.data.pop();
});
window.myBar.update();
});
</script>
</body>
</html>

1
samples/charts/bar/vertical.html
View File

@@ -116,7 +116,6 @@
barChartData.labels.push(month);
for (var index = 0; index < barChartData.datasets.length; ++index) {
// window.myBar.addData(randomScalingFactor(), index);
barChartData.datasets[index].data.push(randomScalingFactor());
}

3
samples/samples.js
View File

@@ -19,6 +19,9 @@
}, {
title: 'Stacked groups',
path: 'charts/bar/stacked-group.html'
}, {
title: 'Floating',
path: 'charts/bar/float.html'
}]
}, {
title: 'Line charts',

26
src/controllers/controller.bar.js
View File

@@ -213,6 +213,32 @@ module.exports = DatasetController.extend({
return parseArrayOrPrimitive.apply(this, arguments);
},
/**
* Overriding object data parsing since we support mixed primitive/array
* value-scale data for float bars
* @private
*/
_parseObjectData: function(meta, data, start, count) {
var iScale = this._getIndexScale();
var vScale = this._getValueScale();
var vProp = vScale._getAxis();
var parsed = [];
var i, ilen, item, obj, value;
for (i = start, ilen = start + count; i < ilen; ++i) {
obj = data[i];
item = {};
item[iScale.id] = iScale._parseObject(obj, iScale._getAxis(), i);
value = obj[vProp];
if (helpers.isArray(value)) {
parseFloatBar(value, item, vScale, i);
} else {
item[vScale.id] = vScale._parseObject(obj, vProp, i);
}
parsed.push(item);
}
return parsed;
},
initialize: function() {
var me = this;
var meta;

6
src/core/core.scale.js
View File

@@ -1391,8 +1391,8 @@ class Scale extends Element {
/**
* @private
*/
_getAxisID() {
return this.isHorizontal() ? 'xAxisID' : 'yAxisID';
_getAxis() {
return this.isHorizontal() ? 'x' : 'y';
}
/**
@@ -1403,7 +1403,7 @@ class Scale extends Element {
_getMatchingVisibleMetas(type) {
var me = this;
var metas = me.chart._getSortedVisibleDatasetMetas();
var axisID = me._getAxisID();
var axisID = me._getAxis() + 'AxisID';
var result = [];
var i, ilen, meta;

32
test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js vendored Normal file
View File

@@ -0,0 +1,32 @@
module.exports = {
config: {
type: 'horizontalBar',
data: {
labels: ['a', 'b', 'c'],
datasets: [
{
data: [{y: 'b', x: [2, 8]}, {y: 'c', x: [2, 5]}],
backgroundColor: '#ff0000'
},
{
data: [{y: 'a', x: 10}, {y: 'c', x: [6, 10]}],
backgroundColor: '#00ff00'
}
]
},
options: {
legend: false,
title: false,
scales: {
xAxes: [{display: false, ticks: {min: 0}}],
yAxes: [{display: false, stacked: true}]
}
}
},
options: {
canvas: {
height: 256,
width: 512
}
}
};

BIN
test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

32
test/fixtures/controller.bar/floatBar/data-as-objects.js vendored Normal file
View File

@@ -0,0 +1,32 @@
module.exports = {
config: {
type: 'bar',
data: {
labels: ['a', 'b', 'c'],
datasets: [
{
data: [{x: 'b', y: [2, 8]}, {x: 'c', y: [2, 5]}],
backgroundColor: '#ff0000'
},
{
data: [{x: 'a', y: 10}, {x: 'c', y: [6, 10]}],
backgroundColor: '#00ff00'
}
]
},
options: {
legend: false,
title: false,
scales: {
xAxes: [{display: false, stacked: true}],
yAxes: [{display: false, ticks: {min: 0}}]
}
}
},
options: {
canvas: {
height: 256,
width: 512
}
}
};

BIN
test/fixtures/controller.bar/floatBar/data-as-objects.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB