堆叠条形图与chartjs包含的值

Question

我正在尝试创建包含值的访客条形图，例如：

我想显示一个每日总访客的条形图，该条形图应包含总访客和首次访客的信息。

所以数据条应该看起来像：

data: {
    labels: getDataAttributes(data, 'data-date'),
    // an array holding the date of each bar (custom function)
    // for example purposes lets say its just 3 bars
    
    datasets: [{
        label: ['Number of visitors', 'Number of new visitors'],
        data: [[20,15], [25,10], [30, 15]],
        // Here if we would use a simple stacked bar chart the height would be the sum of 2 values
        // e.g.(20+15=35), but I wish that the bar height would be the number of total visitors 20
        // the tooltip should contain values of total visitors and new visitors respectively 20 and 15
    }]
}

我查看了chartjs文档，但只找到了具有堆叠值的示例，并且该解决方案不适用于我所需的设计，是否有人可以参考文档/文章/教程或个人经验，或者我应该切换到d3js？谢谢

Answer 1

您可以定义两个数据集，第一个包含新访问者的值，第二个包含所有访问者的值。

然后将x轴定义为堆叠：

options: {
  scales: {
    xAxes: [{
      stacked: true
    }],

请查看下面的可运行代码段，了解其工作原理：

const baseData = [[20,15], [25,10], [30, 15]];

new Chart('chart', {
  type: 'bar',
  data: {
    labels: ['25.10.2020', '26.10.2020', '27.10.2020'],
    datasets: [{
      label: 'Number of new visitors',
      data: baseData.map(v => v[1]),
      backgroundColor: 'green'
    },
    {
      label: 'Number of visitors',
      data: baseData.map(v => v[0]), 
      backgroundColor: 'blue'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>