使用chart.js生成超过1000个报价

qncylg1j  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(135)

我正在尝试使用chart.js配置图表。我面临的问题是,当我将ticks配置stepSize设置为 X 刻度中的0.04时,我在控制台中收到一个警告:scales.x.ticks.stepSize:0.04将导致生成多达1027个滴答。限制为1000
在内部,LinearScaleBase有一个名为getTickLimit的函数,它将滴答数限制为1000。我尝试在配置中将maxTicksLimit设置为更高的数字,但它不起作用。
有没有办法重写getTickLimit函数?也许我缺少一些配置?每隔0.04显示一次刻度是很重要的,因为我试图显示信息。这是我的图表配置的一个片段:

const config: any = {
    type: 'line',
    data: {
        datasets: [{
                data: data.ecgData,
                borderColor: 'rgb(0, 0, 0)',
                borderWidth: 1,
                radius: 0,
            }
        ]
    },
    options: {
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                type: 'linear',
                position: 'bottom',
                grid: {
                    display: true,
                    drawOnChartArea: true,
                    drawTicks: true,
                },
                ticks: {
                    display: true,
                    autoSkip: false,
                    maxTicksLimit: 5000,
                    stepSize: 0.04
                }
            },
            y: {
                grid: {
                    display: true,
                    drawOnChartArea: true,
                    drawTicks: true
                },
                ticks: {
                    // forces step size to be 50 units
                    stepSize: 0.2,
                    display: true,
                    maxTicksLimit: 3000,
                    autoSkip: false,
                    beginAtZero: true
                }
            }
        }
    }
};

先谢了。

whlutmcx

whlutmcx1#

我假设你正在使用chartjs 4,因为chartjs 3中的tick是在options.scales.yAxes.ticks属性中配置的,而不是options.scales.y.ticks
在x轴上:

  • 计算你自己的报价,并将数组分配给data.labels作为报价的信息源。
  • 使用options.scales.x.ticks.autoSkip: false来确保滴答不会减少

在y轴上添加自己的刻度稍微复杂一些:

  • 计算你自己的y刻度数组,每个刻度保存为一个具有value属性的对象,例如[{value:0},{value:0.2},{value:0.4}]。
  • 添加接受回调函数的options.scales.y.afterBuildTicks并重新分配axis.ticks
  • 你可以使用options.scales.y.callback来检查你确实有> 1,000个tick,并登录控制台(tick.length)

代码示例

import "./styles.css";
import Chart from "chart.js/auto";

import { default as $ } from "./lib/jq";

let SIZE_OF_DATASET = 1500;
let X_STEP_SIZE = 0.04;
let Y_STEP_SIZE = 0.2;

let xTicks = [];
let yTicks = [];
let data = [];
for (let i = 0; i < SIZE_OF_DATASET; i++) {
  xTicks.push((i * X_STEP_SIZE).toFixed(2));
  data.push(Math.random() * 250);
}

for (let i = 0; i < 1250; i++) {
  yTicks.push({ value: i * Y_STEP_SIZE.toFixed(2) });
}

let ctx = $("#myChart");
new Chart(ctx, {
  type: "line",
  data: {
    labels: xTicks,
    datasets: [
      {
        label: "test",
        data: data,
        borderColor: "rgb(0, 0, 0)",
        borderWidth: 1,
        radius: 0
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: "Custom Chart Title"
    },
    scales: {
      x: {
        ticks: {
          autoSkip: false // prevent skipping of ticks in x-axis
        }
      },
      y: {
        afterBuildTicks: (axis) => { // reassign the ticks automatically calculated for you
          axis.ticks = yTicks;
        },
        grid: {
          display: false,
          drawOnChartArea: true,
          drawTicks: true
        },
        ticks: {
          // stepSize: 0.2,
          display: true,
          autoSkip: false,
          beginAtZero: true,
          callback: (tickValue, i, ticks) => { // validate number of ticks
            console.log(ticks.length);
            return tickValue;
          }
        }
      }
    }
  }
});

这里有一个CodeSandbox example

相关问题