如何在图表（chartJS）中添加长度条的背景颜色？

Question

我想通过chart.js创建和照片中一样的条形图

我几乎做了所有事情，但我无法在图表中将一些空格作为background color 的长度条。

这就是我所做的：

CodePen

提前感谢您的帮助，

梅吉

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>