canvas - 使用百分比 (%) 而不是像素 (px) 的线性渐变宽度

Question

我正在使用 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)。但它使我的 Canvas 崩溃，我不知道为什么......

任何人都可以帮助我吗？

谢谢!

Answer 1

您应该使用以下...

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>