我放在折線圖選項中的所有內容都不起作用

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