ChartJS 在值图表中实现数据抽取

72qzrwbm  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(213)

我一直在尝试在vue chartJS中实现数据抽取,但都失败了,我假设解析是阻止我的障碍,因为它是我似乎无法满足的一个要求。
1.数据集的indexAxis必须为“x”
1.数据集必须为线
1.数据集的X轴必须是“线性”或“时间”类型的轴
1.数据必须不需要解析,即解析必须为false
1.数据集对象必须是可变的。插件将原始数据存储为dataset._data,然后在数据集上定义一个新的数据属性。
我目前的图表选项为:

oilOptions: {
    responsive: true,
    scales: {
        y: {
            ... // Formatting and title
        },
        x: {
            type: 'time'
            ... // Formatting and title
        }
    },
    plugins: {
        title: {
            ...
        },
        zoom: {
            ...
        },
        decimation: {
            enabled: true,
            algorithm: 'lttb',
            samples: 500
        }

数据集是布伦特原油价格的历史数据,结构如下:

{
    labels: [
        "1987-05-20",
        "1987-05-21",
        ...
     ],
     datasets: [
        label: "Brent Oil Price",
        fill: false,
        borderWidth: 2,
        borderColor: "rgb(75, 192, 192)",
        tension: 0.5,
        pointRadius: 0,
        // parsing: false (This stops data from rendering anyway)
        data: [
                18,
                18,
                ...
        ]
     ]

我用的是vue-chartjs,但这应该不是问题。
任何帮助都将不胜感激,我的另一个选择是在将数据传递到客户端之前在后端减少数据,或者在我的DB上单独保存减少的数据集。

tzcvj98z

tzcvj98z1#

没有解析意味着你需要提供像内部格式这样的数据,所以在你的数据数组中没有标签数组和对象,如下所示:

{
  datasets: [{
    label: "Brent Oil Price",
    fill: false,
    borderWidth: 2,
    borderColor: "rgb(75, 192, 192)",
    tension: 0.5,
    pointRadius: 0,
    parsing: false
    data: [{
        x: '1987-05-20',
        y: 5
      },
      {
        x: '1987-05-21',
        y: 6
      }
    ]
  }]
}

内部数据格式可在此处文档中找到

相关问题