我正在使用chart.js制作一个带有线性渐变的图形：
<script src="js/Chart.min.js"></script>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
grd.addColorStop(0.2, 'red');
grd.addColorStop(0.4, 'orange');
grd.addColorStop(0.78, 'limegreen');
grd.addColorStop(0.9, 'black');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'horizontalBar',
// The data for our dataset
data: {
labels: ["Confort"],
datasets: [
{
label: ["Confort actuel"],
borderWidth: 0,
borderColor: 'rgba(0,0,0,1.0)',
backgroundColor: 'rgba(0,0,0,0.2)',
hoverBackgroundColor: 'rgba(0,0,0,0)',
data: [64],
},
{
label: ["Confort projeté"],
borderWidth: 0,
borderColor: 'rgba(0,0,0,1.0)',
backgroundColor: grd,
hoverBackgroundColor: grd,
data: [120],
},
{
label: ["Confort optimal"],
borderWidth: 0,
borderColor: 'rgba(0,0,0,1.0)',
backgroundColor: 'rgba(205,205,205,1.0)',
hoverBackgroundColor: 'rgba(205,205,205,1.0)',
data: [100],
},
]
},
// Configuration options go here
options: {
legend: {
display: false,
},
scales: {
xAxes: [{
stacked:false,
ticks: {
beginAtZero:true,
max: 130,
display: false,
},
gridLines : {
display: false,
drawBorder: false,
},
}],
yAxes: [{
display:false,
stacked:true,
barThickness: 20,
gridLines: {
display: false,
drawBorder: false,
}
}],
},
tooltips: {
enabled: false,
callbacks: {
label: function(tooltipItems, data) {
return " " + tooltipItems.xLabel + "%";
}
}
},
}
});
Chart.pluginService.register({
afterDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'right';
ctx.textBaseline = 'center';
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
if (dataset.label[i] == "Confort projeté") {
ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x-8, model.y + 21);
ctx.fillText("▲", model.x+6, model.y + 19);
}
else if (dataset.label[i] == "Confort actuel") {
ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x-8, model.y - 14);
ctx.fillText("▼", model.x+6, model.y - 12);
}
else {
ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x+130, model.y - 14);
ctx.fillText("▼", model.x+6, model.y - 12);
}
}
});
}
});
</script>
如您所见，我尝试使用canvas.width作为渐变（而不是之前的1024）。但它让我的画布崩溃，我不明白为什么......
任何人都可以帮助我？
谢谢！
答案 0 :(得分：2)
您应该使用以下内容......
ctx.canvas.width
var ctx = document.getElementById('myChart').getContext('2d');
var grd = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
grd.addColorStop(0.2, 'red');
grd.addColorStop(0.4, 'orange');
grd.addColorStop(0.78, 'limegreen');
grd.addColorStop(0.9, 'black');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'horizontalBar',
// The data for our dataset
data: {
labels: ["Confort"],
datasets: [{
label: ["Confort actuel"],
borderWidth: 0,
borderColor: 'rgba(0,0,0,1.0)',
backgroundColor: 'rgba(0,0,0,0.2)',
hoverBackgroundColor: 'rgba(0,0,0,0)',
data: [64],
}, {
label: ["Confort projeté"],
borderWidth: 0,
borderColor: 'rgba(0,0,0,1.0)',
backgroundColor: grd,
hoverBackgroundColor: grd,
data: [120],
}, {
label: ["Confort optimal"],
borderWidth: 0,
borderColor: 'rgba(0,0,0,1.0)',
backgroundColor: 'rgba(205,205,205,1.0)',
hoverBackgroundColor: 'rgba(205,205,205,1.0)',
data: [100],
}, ]
},
// Configuration options go here
options: {
legend: {
display: false,
},
scales: {
xAxes: [{
stacked: false,
ticks: {
beginAtZero: true,
max: 130,
display: false,
},
gridLines: {
display: false,
drawBorder: false,
},
}],
yAxes: [{
display: false,
stacked: true,
barThickness: 20,
gridLines: {
display: false,
drawBorder: false,
}
}],
},
tooltips: {
enabled: false,
callbacks: {
label: function(tooltipItems, data) {
return " " + tooltipItems.xLabel + "%";
}
}
},
}
});
Chart.pluginService.register({
afterDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'right';
ctx.textBaseline = 'center';
chartInstance.data.datasets.forEach(function(dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
if (dataset.label[i] == "Confort projeté") {
ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x - 8, model.y + 21);
ctx.fillText("▲", model.x + 6, model.y + 19);
} else if (dataset.label[i] == "Confort actuel") {
ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x - 8, model.y - 14);
ctx.fillText("▼", model.x + 6, model.y - 12);
} else {
ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x + 130, model.y - 14);
ctx.fillText("▼", model.x + 6, model.y - 12);
}
}
});
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>