图表样本不能复制 [英] Chartjs sample can't be reproduced

问题描述

我希望从Chartjs文档中复制此样本的结果： https://www.chartjs.org/docs/latest/samples/scales/time-line.html

我要找的是x上的比例结果：

我将REACT与REACT-chartjs-2和示例的简化版本一起使用，但我设法为x轴保留了相同的配置和数据：

import { DateTime } from 'luxon';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, registerables } from 'chart.js';
import 'chartjs-adapter-luxon';

ChartJS.register(...registerables);

function newDate(days: number) {
  return DateTime.now().plus({ days }).toJSDate();
}

function newDateString(days: number) {
  return DateTime.now().plus({ days }).toISO();
}

const options = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: { display: false },
  },
  scale: {
    x: {
      type: 'time',
      time: {
        tooltipFormat: 'DD T',
      },
    },
    y: {
      type: 'linear',
      suggestedMin: 0,
      suggestedMax: 100,
      ticks: {
        stepSize: 20,
      },
    },
  },
};

const labels = [newDate(0), newDate(1), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)];
const Data = [
  {
    x: newDateString(0),
    y: 41,
  },
  {
    x: newDateString(5),
    y: 21,
  },
  {
    x: newDateString(7),
    y: 12,
  },
  {
    x: newDateString(15),
    y: 38,
  },
];

/*...*/
<Line
  options={options}
  data={{
     datasets: [{ data: data }],
       labels: labels,
     }}
/>

我得到了以下结果(与样本相差甚远)

谢谢

推荐答案

您的问题出在您的选项中，因为您在scale键中定义了比例选项，而它们必须在scales键中定义，因此比例配置永远不会应用，请注意额外的s

这篇关于图表样本不能复制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！