单杠与背景Chart.js

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

在Chart.js中没有简单的方法(例如特定的"100%堆叠条形"类型).你需要的是两个堆叠的水平条.

首先,将图表类型定义为horizontalBar

// html


// 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和的例子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.