为什么我的Chart.js代码忽略了我设置的选项？
我试图绘制一个简单的图表，两个变量应该出现在两个y轴上。我试图隐藏第二个y轴（根据documentation，它应该只需要一个display：false设置），这时我意识到代码忽略了我放在chartOptions变量中的值。
我正在构建一个Django应用程序，所以我为每个页面使用一个base.html文件，并调用一些Python变量。我已经检查了Python组件没有产生问题，这是100%的JavaScript问题：

{% extends 'base.html' %}

{% block content %}
  <form method="post">
    {% csrf_token %}
    <br/>
      &nbsp;<label for="ticker">Enter ticker:</label>
      <input type="text" name="ticker" id="ticker" value="">
      <label for="timeframe">Enter timeframe:</label>
      <select name="timeframe" id="timeframe">
        <option value="1d" {% if chart_data.timeframe == "1d" %}selected{% endif %}>1 day</option>
        <option value="1wk" {% if chart_data.timeframe == "1wk" %}selected{% endif %}>1 week</option>
        <option value="30m" {% if chart_data.timeframe == "30m" %}selected{% endif %}>30 minutes</option>
        <option value="5m" {% if chart_data.timeframe == "5m" %}selected{% endif %}>5 minutes</option>
      </select>
      &nbsp; 
      <button type="submit" class="btn btn-primary"
          style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">Run</button>
    </form>
    {% if chart_data %}
      <div>
        {% if chart_data.latest_price %}
          <br/>
          &nbsp;<h1 class="display-4"><b>{{ chart_data.selected_ticker }}</b>: {{ chart_data.latest_price }}</h1>
        {% endif %}
      </div>
      <div class="chart-container" style="position: absolute; height:600px; width:70vw">
        <canvas id="stock-chart"></canvas>
        <div id="chart-text" style="position: absolute; top: 0; right: 0; padding: 10px;"></div>
      </div>
      <div class="chart-container" style="position: relative; height:600px; width:70vw">
        <canvas id="trend-chart"></canvas>
        <div id="trend-chart-text" style="position: absolute; top: 0; right: 0; padding: 10px;"></div>
      </div>
      <div id="chart-bottom-text"></div>
      <script>
          var chartData = {
            labels: {{ chart_data.labels|safe }},
            datasets: [{
              label: 'Closing price',
              data: {{ chart_data.data|safe }},
              borderColor: 'blue',
              fill: false,
              yAxisID: 'y-axis-1',
              pointRadius: 0.1,
            }, {
              label: 'Aggregated cycle',
              data: {{ chart_data.aggregated_cycle_extended|safe }},
              borderColor: 'red',
              fill: false,
              yAxisID: 'y-axis-2',
              pointRadius: 0.1,
            }]
          };
          </script>
          <script>
          var chartOptions = {
            responsive: true,
            scales: {
              xAxes: [{
                type: 'time',
                time: {
                  unit: 'minute',
                  displayFormats: {
                    minute: 'MMM D, YYYY h:mm A',
                  },
                },
                ticks: {
                  source: 'auto',
                },
                distribution: 'linear',
              }],
              yAxes: [{
                id: 'y-axis-1',
                position: 'left',
                ticks: {
                  beginAtZero: false,
                },
              }, {
                id: 'y-axis-2',
                display: false, // Set display to false to hide the secondary y-axis
              }],
            },
          };
        </script>
        <script>
          var ctx = document.getElementById('stock-chart').getContext('2d');
          var myChart = new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: chartOptions,
          });
          var chartText = document.getElementById('chart-text');
          chartText.innerHTML = "<p style='font-size: 12px;'>Cycle-Detrended Prices correlation: " + {{ chart_data.correlation|safe }} + '%</p>';
        </script>
{% endif %}
{% endblock %}