Chart.js 忽略选项

Question

我正在尝试使用 chart.js 创建折线图，但是当我尝试设置图表样式时。 选项中的所有内容都将被忽略。

这是我的代码：

<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
      responsive: true,
      layout: { padding: { top: 12, left: 12, bottom: 12 } },
      title: {
        display: true,
        text: 'Chart.js Line Chart - Cubic interpolation mode'
      },
      scales: {
        xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
        yAxes: [{ gridLines: { display: false } }]
      },
      plugins: { datalabels: { display: false } },
      legend: { display: false },
      elements: {
          point: { radius: 5 },
          line: { tension: 0.4, fill: false },
      },
      //tooltips: {},
      hover: { mode: 'nearest', animationDuration: 400 },
    };
var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
        datasets: [
          {
            fill: false,
            borderColor: '#6ebffe',
            pointBackgroundColor: '#6ebffe',
            pointBorderColor: '#8cff00',
            data: [320, 325, 300, 350, 340],
          }
        ],
        options: ChartOptions
      }
    });
</script>

我试图从https://www.chartjs.org/samples/latest/charts/line/interpolation-modes.html 复制代码，但它是一样的。我无法在图表中添加选项。 连标题都没有显示。这不是缓存问题，因为我在打开 chrome devtools 的情况下运行它并尝试使用不同的浏览器。

Answer 1

选项放错地方了，
它们应该放在data 对象之后

  data: {
  },
  options: ChartOptions

您将它们作为数据对象的一部分...

  data: {
    options: ChartOptions
  },

请参阅以下工作 sn-p...

<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
      responsive: true,
      layout: { padding: { top: 12, left: 12, bottom: 12 } },
      title: {
        display: true,
        text: 'Chart.js Line Chart - Cubic interpolation mode'
      },
      scales: {
        xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
        yAxes: [{ gridLines: { display: false } }]
      },
      plugins: { datalabels: { display: false } },
      legend: { display: false },
      elements: {
          point: { radius: 5 },
          line: { tension: 0.4, fill: false },
      },
      //tooltips: {},
      hover: { mode: 'nearest', animationDuration: 400 },
    };
var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
        datasets: [
          {
            fill: false,
            borderColor: '#6ebffe',
            pointBackgroundColor: '#6ebffe',
            pointBorderColor: '#8cff00',
            data: [320, 325, 300, 350, 340],
          }
        ]
      },
      options: ChartOptions
    });
</script>