分析chartJS Horizontal上的数据

2skhul33  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(158)
const labels = ['s', 'a', 'd']
const data = {
labels: labels,
  datasets: [{
    label: 'Weekly Sales',
    data: [
    {products: { sales: [0, 5], id: 1 } },
    {products: { sales: [5, 10], id: 2 } },
    {products: { sales: [10, 15], id: 3 } },
    ],
    backgroundColor: [
      'rgba(255, 26, 104, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)',
    ],
    borderColor: [
      'rgba(255, 26, 104, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
    ],
    borderWidth: 1
  }]
};

// config 
const config = {
  type: 'bar',
  data,
  options: {
  parsing: {
    yAxisKey: 'products.sales', 
    },
  indexAxis: 'y',
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

我正在尝试使用Chartjs创建一个水平条形图,我在将数据放入图表时遇到了一些麻烦。enter image description here输出应该像图像中的这个。

v6ylcynt

v6ylcynt1#

您可以不定义parsing.yAxisKey,而按如下方式Map原始数据:

data: rawData.map(o => o.products.sales),

请看一下下面修改后的可运行代码,看看它是如何工作的。
第一个

相关问题