时间戳

首页 > 解决方案 > ChartJs：Horizo​​ntalBar 缺少背景颜色

javascript - ChartJs：Horizo​​ntalBar 缺少背景颜色

问题描述

我有以下使用 ChartJs 2.7.3 的图表，它应该在红色条中显示 10 年的跨度。由于某种原因，该栏的背景没有正确应用（如果您悬停图表，您仍然会得到正确的悬停工具提示）

$(() => {
  var ctx = $("#Chart")[0];
  var chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
      labels: ['ABC'],
      datasets: [{
        label: 'ABC',
        data: [{
          t: '2015-3-15',
          y: 10
        }],
        backgroundColor: 'rgba(255,0,0,1)'
      }]
    },
    options: {
      scales: {
        xAxes: [{
          type: 'time',
          time: {
            min: '2010-1-01',
            max: '2030-1-01'
          }
        }]
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<canvas id="Chart" height="50"></canvas>

如果我将图表类型从 a 切换horizontalBar到 normal bar，那么它会按预期工作：

$(() => {
  var ctx = $("#Chart")[0];
  var chart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['ABC'],
      datasets: [{
        label: 'ABC',
        data: [{
          t: '2015-3-15',
          y: 10
        }],
        backgroundColor: 'rgba(255,0,0,1)'
      }]
    },
    options: {
      scales: {
        xAxes: [{
          type: 'time',
          time: {
            min: '2010-1-01',
            max: '2030-1-01'
          }
        }]
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<canvas id="Chart" height="50"></canvas>

水平条形图缺少什么？

标签： javascriptchart.js

解决方案

我不知道为什么您的代码不起作用，但可以提出一种不同的方法来解决问题。

请在下面查看您修改后的代码。为了摆脱恼人的 JavaScript 警告，我使用了最新的稳定版 Chart.js (2.3.0)。

我包括了两个条，因为我希望数据可以是动态大小的。然而，它也应该适用于单个酒吧。但是我不知道如何处理该y值，这取决于您的用例。

$(() => {
  var data = [{
    l: 'ABC',
    t: '2015-3-15',
    y: 10
  }, {
    l: 'XYZ',
    t: '2020-11-05',
    y: 20
  }];
  var ctx = $("#Chart")[0];
  var chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
      yLabels: data.map(o => o.l),
      datasets: [{
        label: 'ABC',
        data: data.map(o => moment(o.t, 'YYYY-M-DD')),
        backgroundColor: ['rgba(255,0,0, 0.5)', 'rgba(0,255,0,0.5)']
      }]
    },
    options: {
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          type: 'time',
          time: {
            parser: 'YYYY-M-DD',
            unit: 'year',
            tooltipFormat: 'YYYY/M/D'
          },
          ticks: {
            min: '2010-1-01',
            max: '2030-1-01'
          }
        }]
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<canvas id="Chart" height="80"></canvas>

推荐阅读