使用 Chartjs 显示小图表

Question

我想实现如下图表（一个7天的小图表）：

为此，我开始将 ChartJS 与 React 结合使用。我对 ChartJS 的了解有限。

我的折线图选项是：

const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: false
        },
        title: {
            display: false
        },
        tooltips: {
            enabled: false
        },
    },
    elements: {
        point:{
            radius: 0
        }
    },
    tooltips:{
        enabled: false
    },
    hover: {mode: null},
    scales: {
        x: {
            display: false,
        },
        y: {
            display: false,
        }
    },
    animation: {
        duration: 0
    },
    parsing: {
        xAxisKey: 'time',
        yAxisKey: 'value'
    }
}

const dataOptions = {
    labels: [],
    datasets: [] // i fill this when the component is mounted,
}

然后我添加一个图表：

<Line
    data={dataOptions}
    options={options}>
</Line>

我得到：

我需要调整最大值和最小值，这样它看起来更平滑。

我怎样才能得到第一张图片——因为我的图片看起来很基本，7 天的小图表通常是什么？

Answer 1

我不清楚你的问题。 我可以看到你说你想要的和你说你得到的之间的区别是（对我来说）：

• 你的有一条紫线而不是绿线
• 你的图表高度较小
• 你的数据少得多

你说的顺利似乎是你的数据少得多（上面有数百个数据点，你只有 ~20. 增加你的数据，它会看起来更流畅。

为了获得更高的图表高度，我参考了另一个线程： 如何设置 Y 轴的最大值和最小值 您可以在 scales-ticks-option 中使用 suggestedMin/Max。

var options = {
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMax: 1000, // maximum value will be 1000.
                suggestedMin: 100, // minimum value will be 100.
                // OR //
                beginAtZero: true   // minimum value will be 0.
            }
        }]
    }
};

chartJs 中的图表大小是一件大事。 您已经在使用

responsive: true,
maintainAspectRatio: false,

这导致 chartJs 尝试使用它需要的空间并从外部元素（例如 div）获取。 但对我来说，让它 100% 工作仍然很困难。有时一些 css 可能会破坏这种行为。

如果你是图表 JS 的新手，我真的推荐他们自己的网站有很多样本和一个在线引擎，你可以在其中尝试任何选项。 https://www.chartjs.org/docs/latest/samples/scales/linear-min-max-suggested.html

在您的网站上编码之前先在那里测试您的东西。 您可以在他们的实时样本中编辑选项并直接查看效果。