javascript - How can I add background color of length bars in chart (chartJS)? - Stack Overflow

admin管理员组

文章数量:1389801

I want to create by chart.js bar chart as the same as is in the photo

I did almost everything but I have problem to do some white spaces as background color of length bars in the chart.

This is what I have done:

CodePen

Thank you for your help in advance,

Megi

I want to create by chart.js bar chart as the same as is in the photo

I did almost everything but I have problem to do some white spaces as background color of length bars in the chart.

This is what I have done:

CodePen

Thank you for your help in advance,

Megi

• javascript
• html
• css
• chart.js
• bar-chart

Share Follow edited Aug 27, 2017 at 12:08 Magdalena Dering asked Aug 27, 2017 at 12:03 Magdalena DeringMagdalena Dering 3111 silver badge1010 bronze badges 1

• I just looked through the documentation and I don't see that as an option anywhere. Thank you for introducing me to this library! – Solona Armstrong Commented Aug 27, 2017 at 12:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

There is no native functionality for this in ChartJS at the moment.

Only way to achieve this is to create your own chart plugin and draw the white background.

ᴘʟᴜɢɪɴ

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
<div id="chart_JS">
   <canvas id="myChart"></canvas>
</div>

You can duplicate the first dataset, only to put everywhere 100 (%) and a white background for this set.

and !!! for yAxes: [{ stacked: true }],

https://jsfiddle/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./ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
  <div id="chart_JS">
    <canvas id="myChart"></canvas>
  </div>

本文标签： javascriptHow can I add background color of length bars in chart (chartJS)Stack Overflow