单杠与背景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和的例子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.