图表.js - 这些类型之间不兼容'options.legend.position'的类型

Question

我想把图例放在图形下面(这很简单(，但代码根本不起作用，给了我以下错误：

The types of 'options.legend.position' are incompatible between these types.
Type 'string' is not assignable to type '"bottom" | "left" | "right" | "top" | "chartArea" | undefined'.

更糟糕的是，我在CodeSandBox中得到了相同的代码，没有任何区别，而且它工作得很好。。。以下是链接：https://codesandbox.io/s/spring-hill-3nme9?file=/src/components/Scatter.tsx

有什么帮助吗？谢谢

Answer 1

将位置设置为常量对我的有效

options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
position: "bottom" as const, // <----
labels: {
fontColor: "#000080"
}
}
}

Answer 2

{
responsive: true,
plugins: {
legend: {
// position: 'top'
position: 'left' as 'left'
},
title: {
display: true,
text: 'Present device comparison'
}
}
}

它需要根据类型来判断。

Answer 3

散点图希望数据以对象数组的形式传递，每个对象包含x和y属性。给定您的数据，您可以通过定义type: "line"并将showLine: false添加到每个数据集来将图表类型更改为折线图。

const chartConfig = {
type: "line",
data: {
datasets: [{
label: "Bar Dataset",
data: [10, 20, 30, 40],
showLine: false
},
{
label: "Line Dataset",
data: [50, 50, 50, 50],
type: "line",
showLine: false
}    

请查看您修改后的沙盒。