javascript - 带背景的单条 Chart.js

Question

我想用 Chart.js 绘制一个水平条，但我想要一个默认背景颜色（这是最大值）并用另一种颜色绘制当前值。就像下图一样。我怎样才能做到这一点？

Answer 1

在 Chart.js 中没有简单的方法可以做到这一点（例如特定的“100% 堆叠条形”类型）。您需要的是两个堆叠的水平条。

• 首先，将您的图表类型定义为horizontalBar

  // html
  <canvas id="chart" height="20"></canvas>
  
  // javascript
  var ctx = document.getElementById('chart');
  var bar_chart = new Chart(ctx, {
    type: 'horizontalBar' // this will give you a horizontal bar.
    // ...
  };
  

• 为了有一个而不是两个，它们需要堆叠。您还需要隐藏刻度。或者，您可以隐藏图例和工具提示。这都是在选项中配置的：

  var bar_chart = new Chart(ctx, {
    // ...
    options: {
      legend: {
        display: false // hides the legend
      },
      tooltips: {
        enabled: false // hides the tooltip.
      }
      scales: {
        xAxes: [{
          display: false, // hides the horizontal scale
          stacked: true // stacks the bars on the x axis
        }],
        yAxes: [{
          display: false, // hides the vertical scale
          stacked: true // stacks the bars on the y axis
        }]
      }
    }
  };
  

• 由于堆叠条彼此重叠，您的第一个数据集包含您的值 (57.866)，第二个数据集对应于max - value. value = 57866这是一个考虑and的示例max = 80000：

  var value = 57866; // your value
  var max = 80000; // the max
  
  var bar_chart = new Chart(ctx, {
    // ...
    datasets: [{
      data: [value],
      backgroundColor: "rgba(51,230,125,1)"
    }, {
      data: [max - value],
      backgroundColor: "lightgrey"
    }]
  };
  

这是带有完整代码的jsfiddle 。

Answer 2

除了@Tarek 的回答，

如果您需要获取栏中的百分比值，

https://jsfiddle.net/akshaykarajgikar/bk04frdn/53/

依赖：

https://www.chartjs.org/

https://chartjs-plugin-datalabels.netlify.app/

var bar_ctx = document.getElementById('bar-chart');
var bar_chart = new Chart(bar_ctx, {
  type: 'horizontalBar',
  data: {
    labels: [],
    datasets: [{
      data: [57.866],
      backgroundColor: "#00BC43",
      datalabels: {
        color: 'white'               //Color for percentage value
      }
    }, {
      data: [100 - 57.866],
      backgroundColor: "lightgrey",
      hoverBackgroundColor: "lightgrey",
      datalabels: {
        color: 'lightgray' 			// Make the color of the second bar percentage value same as the color of the bar
      }
    }, ]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      xAxes: [{
        display: false,
        stacked: true
      }],
      yAxes: [{
        display: false,
        stacked: true
      }],
    }, // scales
    plugins: {																	// PROVIDE PLUGINS where you can specify custom style
      datalabels: {
        align: "start",
        anchor: "end",
        backgroundColor: null,
        borderColor: null,
        borderRadius: 4,
        borderWidth: 1,
        font: {
          size: 20,
          weight: "bold",											//Provide Font family for fancier look
        },
        offset: 10,
        formatter: function(value, context) {
          return context.chart.data.labels[context.dataIndex];		//Provide value of the percentage manually or through data
        },
      },
    },
  }, // options


});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

<canvas id="bar-chart" height="20"></canvas>