我放入折线图选项中的所有内容都不起作用

Question

如您所见，我有一个混合图表，一个带有折线图的条形图。 我可以更改条形图的选项，这些选项运行良好，但是当我尝试在折线图中放置一些选项时，它不起作用。

我已经尝试合并选项并移动选项，似乎没有任何效果

.HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Javascript：

var myChart = document.getElementById("myChart");
function randomData() {
return Math.random();
}
let barChart = new Chart(myChart, {
type: 'bar',
data: {
labels: ['Test1', 'Test2', 'Test3', 'Test4', 'Test5'],
datasets: [
{
type: 'line',
label: ['line data'],
data: [randomData(), randomData(), randomData(), randomData(), randomData()],
options:{
showLine: false,
}
},{
label: ['bar data'],
data: [randomData(), randomData(), randomData(), randomData(), randomData()],
backgroundColor: [
'green',
'red',
'blue',
'purple',
'orange',
],
}],
},
options: {
title: {
display: true,
text: 'Test Chart met random nummers'
},
legend: {
position: 'right',
},
responsive: true,
},
});

我希望能够更改折线图的选项，例如显示或隐藏折线或使用bezierCurve更改曲线。

Answer 1

正如您在有关折线图的文档中读到的那样，showLine是一个dataset属性。你直接在dataset使用它，而不是在options属性下。

datasets: [{
type: 'line',
label: 'Line data',
data: [randomData(), randomData(), randomData(), randomData(), randomData()],
showLine: false
}]

您在options属性中使用的几乎所有其他选项。 贝塞尔曲线的tension就是其中之一。

options:  {
elements: {
line: {
tension: 0
}
}
}