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

请参阅以下工作片段...

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

Chart.js忽略选项

1 个答案: