如何在圖表（chartJS）中添加長條的背景色？

Question

我想通過chart.js創建條形圖，就像在照片中一樣

我幾乎做了所有事情，但是我在將一些空白作為圖表中長條的background color時遇到問題。

這是我所做的：

密碼筆

提前謝謝你的幫助，

梅吉

Answer 1

目前，ChartJS中沒有針對此的本機功能。

實現此目的的唯一方法是創建自己的圖表插件並繪制白色背景。

ᴘʟᴜɢɪɴ

Chart.plugins.register({
   afterDatasetsDraw: function(chartInstance) {
      var ctx = chartInstance.chart.ctx,
          width = chartInstance.chartArea.right;
      chartInstance.data.datasets.forEach(function(dataset, datasetIndex) {
         var datasetMeta = chartInstance.getDatasetMeta(datasetIndex);
         datasetMeta.data.forEach(function(segment, segmentIndex) {
            var height = segment._model.height,
                posX = segment.tooltipPosition().x,
                posY = segment.tooltipPosition().y - (height / 2);
            // draw white background
            ctx.save();
            ctx.fillStyle = 'white';
            ctx.fillRect(posX, posY, width - posX, height);
            ctx.restore();
         });
      });

   }
});

⧩

 Chart.plugins.register({ beforeDraw: function(chartInstance, easing) { var ctx = chartInstance.chart.ctx; ctx.fillStyle = 'rgb(53, 53, 53)'; var chartArea = chartInstance.chartArea; ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); } }); Chart.plugins.register({ afterDatasetsDraw: function(chartInstance) { var ctx = chartInstance.chart.ctx, width = chartInstance.chartArea.right; chartInstance.data.datasets.forEach(function(dataset, datasetIndex) { var datasetMeta = chartInstance.getDatasetMeta(datasetIndex); datasetMeta.data.forEach(function(segment, segmentIndex) { var height = segment._model.height, posX = segment.tooltipPosition().x, posY = segment.tooltipPosition().y - (height / 2); // draw white background ctx.save(); ctx.fillStyle = 'white'; ctx.fillRect(posX, posY, width - posX, height); ctx.restore(); }); }); } }); var ctx = document.getElementById('myChart').getContext("2d"); ctx.canvas.width = 300; ctx.canvas.height = 200; var chart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["C++ development", ".Net", "HTML5", "jQuery", "Angular"], datasets: [{ backgroundColor: 'rgb(54, 195, 110)', borderColor: 'rgba(255, 255, 255, 0.5)', borderWidth: 0, data: [95, 75, 80, 55, 85] }] }, options: { responsive: false, legend: { display: false, }, title: { display: false, }, scales: { xAxes: [{ ticks: { beginAtZero: true }, display: false }], yAxes: [{ display: false }] }, tooltips: { titleFontFamily: 'Raleway, sans-serif', titleFontSize: 13, bodyFontFamily: 'Raleway, sans-serif', callbacks: { label: function(tooltipItem, data) { var allData = data.datasets[tooltipItem.datasetIndex].data; var tooltipData = allData[tooltipItem.index]; var total = 0; for (var i in allData) { total += allData[i]; } return tooltipData + '%'; } } } } }); 

 canvas { background: rgb(53, 53, 53); padding: 20px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"> </script> <div id="chart_JS"> <canvas id="myChart"></canvas> </div> 

Answer 2

您可以復制第一個數據集，但只能將此位置放100（％）和白色背景。

和！ 對於yAxes: [{ stacked: true }],

https://jsfiddle.net/qrwvvtxs/3/

 Chart.plugins.register({ beforeDraw: function(chartInstance, easing) { var ctx = chartInstance.chart.ctx; ctx.fillStyle = 'rgb(53, 53, 53)'; var chartArea = chartInstance.chartArea; ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); } }); var ctx = document.getElementById('myChart').getContext("2d"); ctx.canvas.width = 300; ctx.canvas.height = 200; var chart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["C++ development", ".Net", "HTML5", "jQuery", "Angular"], datasets: [{ backgroundColor: 'rgb(54, 195, 110)', borderColor: 'rgba(255, 255, 255, 0.5)', borderWidth: 0, data: [95, 75, 80, 55, 85] },{ backgroundColor: 'rgb(255, 255, 255)', borderColor: 'rgba(255, 255, 255, 0.5)', borderWidth: 0, data: [100, 100, 100, 100, 100] }], }, options: { responsive: false, legend: { display: false, }, title: { display: false, }, scales: { xAxes: [{ ticks: { beginAtZero: true }, display: false }], yAxes: [{ stacked: true, display: false }], }, tooltips: { titleFontFamily: 'Raleway, sans-serif', titleFontSize: 13, bodyFontFamily: 'Raleway, sans-serif', callbacks: { label: function(tooltipItem, data) { var allData = data.datasets[tooltipItem.datasetIndex].data; var tooltipData = allData[tooltipItem.index]; var total = 0; for (var i in allData) { total += allData[i]; } return tooltipData + '%'; } } } } }); 

 body { background: #aaa; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script> <div id="chart_JS"> <canvas id="myChart"></canvas> </div>