ChartJS有多个数据集，但只有一个条形图

Question

我需要一个使用两个不同数据集的条形图，因为一个用于交易量，另一个用于欧元。问题是，我只需要第一个条形图来使用体积值，另外4个条形图则使用欧元值，但如果我使用两个数据集，条形图将逐个显示，每个x值只需要一个。如果我不这样做，但值试图跳过数组中的某些部分，它将以很大的空间显示，我需要它看起来很好。。谢谢你的帮助，现在我的代码是：

var blocked = new Array(false,false,false,false); //bloccare o no una delle 4 barre
const data = {
labels: ['Volume', 'Manutenzione', 'Professionals', 'Materie', 'Cleaning'],
datasets: [{
label: 'Volumi',
data: [60000, 10000, 20000, 25000, 15000],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1,
dragData: true,
pointHitRadius: 20, //allargare la presa a 20px così non devi essere preciso a pigliarla
},
{
label: 'euro',
data:[,500000,200000,300000,100000],
yAxisID: "y1"
}
]
};

// config 
const config = {
type: 'bar',
data,
options: {
plugins:{
//tooltip:{ //rimuovere il tooltip
//  enabled: false
//},
dragData: {

round: 1, //round data, 0 per essere intero
//magnet: {
//to: Math.round, //far diventare il valore all'intero più vicino
//to: (value) => value + 2 questo lo fa diventare + 2
//},
onDragStart: (event) =>{
//console.log(event)
var labl = getLabel(event)



switch(labl){
case "Manutenzione": 
blocked[0] = !blocked[0];
return false;
case "Professionals": 
blocked[1] = !blocked[1];
return false ;
case "Materie": 
blocked[2] = !blocked[2];
return false ;
case "Cleaning": 
blocked[3] = !blocked[3];
return false ;
default: return true
}
//event.target.style.cursor = 'grabbing';
},
onDrag:(event, datasetIndex, index, value) =>{
event.target.style.cursor = 'grabbing';
updateValues(value)
},
onDragEnd:(event, datasetIndex, index, value) =>{
//console.log(event)
event.target.style.cursor = 'default';
}
}
},
scales: {
y: {
suggestedMin: 0,
suggestedMax: 120000,
beginAtZero: true,
min: 0,
grid:{
drawOnChartArea: false
}
},
y1: {
suggestedMin: 0,
suggestedMax: 1000000,
beginAtZero: true,
min: 0,
position: 'right'
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);

function updateValues(val){
var vol = myChart.data.datasets[0].data[0] //volume
var man = myChart.data.datasets[0].data[1] //manutenzione
var prof = myChart.data.datasets[0].data[2] //professionals
var mat = myChart.data.datasets[0].data[3] //materie
var clean = myChart.data.datasets[0].data[4] //cleaning

var tot4 = man + prof + mat + clean
var diff = vol - tot4
var diff2 = diff/4

if(!blocked[0])man+=diff2
if(!blocked[1])prof+=diff2
if(!blocked[2])mat+=diff2
if(!blocked[3])clean+=diff2


update(man, prof, mat, clean)

}
function update(man, prof, mat, clean){

myChart.data.datasets[0].data[1] = man
myChart.data.datasets[0].data[2] = prof
myChart.data.datasets[0].data[3] = mat
myChart.data.datasets[0].data[4] = clean
myChart.update()
}
function getLabel(evt) {
const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length) {
const firstPoint = points[0];
const label = myChart.data.labels[firstPoint.index];
//console.log(label)
return label
}
}
function clickHandler(evt) {
const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length) {
const firstPoint = points[0];
const label = myChart.data.labels[firstPoint.index];
const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
//console.log(label)
return label
}
}

function mousemoveHandler(mousemove, chart){
//console.log(mousemove)

const cursorPosition = chart.getElementsAtEventForMode(mousemove, 'nearest', {intersect: true}, true)
//console.log(cursorPosition)
if(cursorPosition[0]){ //se c'è almeno un el
const label = myChart.data.labels[cursorPosition[0].index];
mousemove.target.style.cursor = 'default';

switch(label){
case "Volume":
mousemove.target.style.cursor = 'grab';
break;
case "Manutenzione": 
if(blocked[0]) mousemove.target.style.cursor = 'move'; 
else mousemove.target.style.cursor = 'not-allowed'; 
break;
case "Professionals": 
if(blocked[1]) mousemove.target.style.cursor = 'move'; 
else mousemove.target.style.cursor = 'not-allowed'; 
break;
case "Materie": 
if(blocked[2]) mousemove.target.style.cursor = 'move'; 
else mousemove.target.style.cursor = 'not-allowed'; 
break;
case "Cleaning": 
if(blocked[3]) mousemove.target.style.cursor = 'move'; 
else mousemove.target.style.cursor = 'not-allowed'; 
break;
default: console.log("qui non ci entrerà mai")
mousemove.target.style.cursor = 'default';
}
//mousemove.target.style.cursor = 'default';

}
else    mousemove.target.style.cursor = 'default';
}
myChart.canvas.addEventListener('mousemove', (e) => {
mousemoveHandler(e, myChart)
})

Answer 1

这是一个棘手的用例。我添加了一个片段，其中每个数据有1个数据集(而不仅仅是2个(。数据通过数据点存储在数据集中。还有X轴的定义，以避免类别+条形图的行为。

const data = {
datasets: [{
label: 'Volumi',
data: [{x: 1, y: 60000}],
backgroundColor: 'rgba(255, 26, 104, 0.2)',
borderColor: 'rgba(255, 26, 104, 1)',
borderWidth: 1,
xAxisID: "x1",
categoryPercentage: 1
},
{
label: 'euro',
data:[{x: 2, y: 500000}],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
xAxisID: "x1",
yAxisID: "y1",
categoryPercentage: 1
},
{
label: 'euro',
data:[{x: 3, y: 200000}],
backgroundColor: 'rgba(255, 206, 86, 0.2)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1,
xAxisID: "x1",
yAxisID: "y1",
categoryPercentage: 1
},
{
label: 'euro',
data:[{x: 4, y: 300000}],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
xAxisID: "x1",
yAxisID: "y1",
categoryPercentage: 1
},
{
label: 'euro',
data:[{x: 5, y: 100000}],
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(0, 0, 0, 1)',
borderWidth: 1,
xAxisID: "x1",
yAxisID: "y1",
categoryPercentage: 1
}
]
};
const config = {
type: 'bar',
data,
options: {
plugins: {
legend: false,
tooltip: {
callbacks: {
title(tooltipItems){
if (tooltipItems.length) {
const item = tooltipItems[0];
const tick = item.chart.scales.x.ticks[item.datasetIndex]; 
return tick.label;
}
}
}
}
},
scales: {
x: {
labels: ['Volume', 'Manutenzione', 'Professionals', 'Materie', 'Cleaning'],
},
x1: {
display: false,
offset: true
},
y: {
suggestedMin: 0,
suggestedMax: 120000,
beginAtZero: true,
min: 0,
grid: {
drawOnChartArea: false
}
},
y1: {
suggestedMin: 0,
suggestedMax: 1000000,
beginAtZero: true,
min: 0,
position: 'right'
}
}
}
};
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, config);

.myChartDiv {
max-width: 600px;
max-height: 400px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>