Chart.js中具有不同视图类型的重叠图表数据集

Question

我是Chart.js的新手。并坚持实施此图表：

我的数据如下：

data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [
      {
        label: 'Issues',
        backgroundColor: 'rgba(200, 0, 200, 1)',
        borderColor: 'rgba(255, 159, 64, 1)',
        data: [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8]
      },
      {
        label: 'Average value of Issues(from prev. years)',
        backgroundColor: 'rgba(150, 100, 150, 1)',
        borderColor: 'rgba(150, 100, 150, 1)',
        data: [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
      }
    ]
  }

我试图在chartis中做到这一点，我可以在'draw'事件的帮助下修改第二组。但我不明白如何在chart.js

中做到这一点

主要问题：

1. 如何实施这种图表？
2. 我应该为此创建插件还是扩展现有的图表类型？

提前谢谢。

Answer 1

此任务的可能解决方案之一是使用不同类型的数据集和其他选项：

 const data = {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [
        {
          type: 'line',
          label: 'Average Issues',
          backgroundColor: 'black',
          borderColor: 'black',
          data: [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4],
          fill: false,
          pointRadius: 28,
          pointHoverRadius: 39,
          showLine: false
        },
        {
          label: 'Issues',
          backgroundColor: 'rgba(200, 0, 200, 1)',
          borderColor: 'rgba(255, 159, 64, 1)',
          borderWidth: 78,
          data: [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8]
        }
      ]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      responsive: true,
      legend: {
        display: false
      },
      elements: {
        point: {
          pointStyle: 'line'
        }
      }
    }
  };

  const chart = new Chart(canvasElement, data);