我有一个带有双水平条的图表,它们分别代表不同的y比例。
我已经阅读了文档,一些教程,但没有看到任何内容。
我想对这两个条使用一个y刻度。
有人可以帮助我吗?
var canvas = document.getElementById('clintesContatadosChart');
var lineChartData2 = {
labels: data.nome,
datasets: [
{
label: "Total Clients",
backgroundColor: '#5793cb',
borderColor: '#80abec',
borderWidth: 1,
hoverBackgroundColor: ["#66A2EB", "#FCCE56"],
data: data.clientes,
xAxisID: 'x1',
// yAxisID: 'first-y-axis'
},
{
label: "Clientes Contact",
backgroundColor: '#f9c5c5',
borderColor: '#f9c5c5',
borderWidth: 1,
hoverBackgroundColor: ["#66A2EB", "#FCCE56"],
data: data.contatos_realizados,
xAxisID: 'x2',
}
]
};
var option = {
tooltips: {
enabled: true
},
hover: {
animationDuration: 1
},
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = 'center';
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x + 10, bar._model.y + 7);
});
});
}
},
scales: {
yAxes: [{
gridLines: {
display: false,
color: "rgba(255,99,132,0.2)"
},
ticks: {
beginAtZero: true,
min: 0,
autoSkip: true,
}
}],
xAxes: [{
id: 'x1',
gridLines: {
display: false
},
ticks: {
display: true,
}
}, {
id: 'x2',
type: 'linear',
position: 'bottom',
gridLines: {
display: false
},
ticks: {
display: true
}
}]
}
}
var ctx = document.getElementById("clintesContatadosChart").getContext('2d');
var myLineChart2 = new Chart(ctx, {
type: 'horizontalBar',
data: lineChartData2,
options: option
});