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

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
    }
  }
}