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

Question

我正在使用 Chart.js 制作具有线性渐变的图表：

\n\n

<script src="js/Chart.min.js"></script>\n<script type="text/javascript">\nvar ctx = document.getElementById(\'myChart\').getContext(\'2d\');\n\nvar grd = ctx.createLinearGradient(0, 0, canvas.width, 0);\ngrd.addColorStop(0.2, \'red\');\ngrd.addColorStop(0.4, \'orange\');\ngrd.addColorStop(0.78, \'limegreen\');\ngrd.addColorStop(0.9, \'black\');\n\nvar chart = new Chart(ctx, {\n    // The type of chart we want to create\n    type: \'horizontalBar\',\n\n    // The data for our dataset\n    data: {\n        labels: ["Confort"],\n        datasets: [\n        {\n            label: ["Confort actuel"],\n            borderWidth: 0,\n            borderColor: \'rgba(0,0,0,1.0)\',\n            backgroundColor: \'rgba(0,0,0,0.2)\',\n            hoverBackgroundColor: \'rgba(0,0,0,0)\',\n            data: [64],     \n        },\n        {\n            label: ["Confort projet\xc3\xa9"],\n            borderWidth: 0,\n            borderColor: \'rgba(0,0,0,1.0)\',\n            backgroundColor: grd,\n            hoverBackgroundColor: grd,\n            data: [120],\n        },\n        {\n            label: ["Confort optimal"],\n            borderWidth: 0,\n            borderColor: \'rgba(0,0,0,1.0)\',\n            backgroundColor: \'rgba(205,205,205,1.0)\',\n            hoverBackgroundColor: \'rgba(205,205,205,1.0)\',\n            data: [100],\n        },\n        ]\n    },\n\n    // Configuration options go here\n    options: {\n        legend: {\n            display: false,\n        },\n        scales: {\n            xAxes: [{\n                stacked:false,\n                ticks: {\n                    beginAtZero:true,\n                    max: 130,\n                    display: false,\n                },\n                gridLines : {\n                    display: false,\n                    drawBorder: false,\n                },\n            }],\n            yAxes: [{\n                display:false,\n                stacked:true,\n                barThickness: 20,\n                gridLines: {\n                    display: false,\n                    drawBorder: false,\n                }\n            }],\n        },\n        tooltips: {\n            enabled: false,\n            callbacks: {\n                label: function(tooltipItems, data) { \n                    return " " + tooltipItems.xLabel + "%";\n                }\n            }\n        },\n    }\n});\nChart.pluginService.register({\n    afterDraw: function(chartInstance) {\n        var ctx = chartInstance.chart.ctx;\n\n        // render the value of the chart above the bar\n        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, \'normal\', Chart.defaults.global.defaultFontFamily);\n        ctx.textAlign = \'right\';\n        ctx.textBaseline = \'center\';\n\n        chartInstance.data.datasets.forEach(function (dataset) {\n            for (var i = 0; i < dataset.data.length; i++) {\n                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;\n                if (dataset.label[i] == "Confort projet\xc3\xa9") {\n                    ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x-8, model.y + 21);\n                    ctx.fillText("\xe2\x96\xb2", model.x+6, model.y + 19);\n                }\n                else if  (dataset.label[i] == "Confort actuel") {\n                    ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x-8, model.y - 14);\n                    ctx.fillText("\xe2\x96\xbc", model.x+6, model.y - 12);\n                }\n                else {\n                    ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x+130, model.y - 14);\n                    ctx.fillText("\xe2\x96\xbc", model.x+6, model.y - 12);\n                }\n            }\n        });\n  }\n});\n</script>\n

\n\n

正如您所看到的，我尝试使用 canvas.width 作为渐变（而不是之前的 1024）。但这让我的画布崩溃了，我不知道为什么......

\n\n

有人可以帮助我吗？

\n\n

谢谢！

\n

Answer 1

您应该使用以下...

\n\n

ctx.canvas.width\n

\n\n

\r\n

\r\n

ctx.canvas.width\n

\r\n

var ctx = document.getElementById(\'myChart\').getContext(\'2d\');\r\n\r\nvar grd = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);\r\ngrd.addColorStop(0.2, \'red\');\r\ngrd.addColorStop(0.4, \'orange\');\r\ngrd.addColorStop(0.78, \'limegreen\');\r\ngrd.addColorStop(0.9, \'black\');\r\n\r\nvar chart = new Chart(ctx, {\r\n   // The type of chart we want to create\r\n   type: \'horizontalBar\',\r\n\r\n   // The data for our dataset\r\n   data: {\r\n      labels: ["Confort"],\r\n      datasets: [{\r\n         label: ["Confort actuel"],\r\n         borderWidth: 0,\r\n         borderColor: \'rgba(0,0,0,1.0)\',\r\n         backgroundColor: \'rgba(0,0,0,0.2)\',\r\n         hoverBackgroundColor: \'rgba(0,0,0,0)\',\r\n         data: [64],\r\n      }, {\r\n         label: ["Confort projet\xc3\xa9"],\r\n         borderWidth: 0,\r\n         borderColor: \'rgba(0,0,0,1.0)\',\r\n         backgroundColor: grd,\r\n         hoverBackgroundColor: grd,\r\n         data: [120],\r\n      }, {\r\n         label: ["Confort optimal"],\r\n         borderWidth: 0,\r\n         borderColor: \'rgba(0,0,0,1.0)\',\r\n         backgroundColor: \'rgba(205,205,205,1.0)\',\r\n         hoverBackgroundColor: \'rgba(205,205,205,1.0)\',\r\n         data: [100],\r\n      }, ]\r\n   },\r\n\r\n   // Configuration options go here\r\n   options: {\r\n      legend: {\r\n         display: false,\r\n      },\r\n      scales: {\r\n         xAxes: [{\r\n            stacked: false,\r\n            ticks: {\r\n               beginAtZero: true,\r\n               max: 130,\r\n               display: false,\r\n            },\r\n            gridLines: {\r\n               display: false,\r\n               drawBorder: false,\r\n            },\r\n         }],\r\n         yAxes: [{\r\n            display: false,\r\n            stacked: true,\r\n            barThickness: 20,\r\n            gridLines: {\r\n               display: false,\r\n               drawBorder: false,\r\n            }\r\n         }],\r\n      },\r\n      tooltips: {\r\n         enabled: false,\r\n         callbacks: {\r\n            label: function(tooltipItems, data) {\r\n               return " " + tooltipItems.xLabel + "%";\r\n            }\r\n         }\r\n      },\r\n   }\r\n});\r\nChart.pluginService.register({\r\n   afterDraw: function(chartInstance) {\r\n      var ctx = chartInstance.chart.ctx;\r\n\r\n      // render the value of the chart above the bar\r\n      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, \'normal\', Chart.defaults.global.defaultFontFamily);\r\n      ctx.textAlign = \'right\';\r\n      ctx.textBaseline = \'center\';\r\n\r\n      chartInstance.data.datasets.forEach(function(dataset) {\r\n         for (var i = 0; i < dataset.data.length; i++) {\r\n            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;\r\n            if (dataset.label[i] == "Confort projet\xc3\xa9") {\r\n               ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x - 8, model.y + 21);\r\n               ctx.fillText("\xe2\x96\xb2", model.x + 6, model.y + 19);\r\n            } else if (dataset.label[i] == "Confort actuel") {\r\n               ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x - 8, model.y - 14);\r\n               ctx.fillText("\xe2\x96\xbc", model.x + 6, model.y - 12);\r\n            } else {\r\n               ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x + 130, model.y - 14);\r\n               ctx.fillText("\xe2\x96\xbc", model.x + 6, model.y - 12);\r\n            }\r\n         }\r\n      });\r\n   }\r\n});

\r\n

\r\n

\r\n

\n