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

gfttwv5a 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(166)

我是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.如何实现这类图表？
1.我应该为此创建插件还是扩展现有图表类型？
先谢谢你了。

chart.js

来源：https://stackoverflow.com/questions/44672062/overlap-chart-datasets-with-different-view-types-in-chart-js

2条答案

按热度按时间

bvjxkvbb1#

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

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);

赞(0）回复(0）举报 2022-11-06

k5hmc34c2#

正如the documentation所说...
创建混合图表时，我们在每个数据集上指定图表类型。
换句话说就是：您可以在配置级别 * 指定图表类型，然后在数据集级别 * 更改它。

赞(0）回复(0）举报 2022-11-06