为什么x轴不增加‘月’chart.js。另外，XAxis没有获得头衔

Question

https://water.sas.usace.army.mil/chart.htm https://water.sas.usace.army.mil/chart.png See the Code Above, (View Source) The code builds a time-series chart. The scales section has unit set to month, however chart does not display with monthly increment on x axis.

Also Y axis will not display title.

Answer 1

主要问题是config没有正确格式化，options.plugins没有被}关闭，因此Chart.js不考虑整个scales部分。

此外，您还应该定义一个time.parser，让日期适配器知道如何解析提供的日期字符串。

要小心地为time.parser和time.displayFormats选择正确的time.displayFormats。

因此，如果您按照以下方式定义config，那么它应该可以工作。

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: 'bottom'
      },
      title: {
        display: true,
        text: "HARTWELL PROJECT",
        font: {
          size: 20
        }
      },
    },
    scales: {
      x: {
        type: 'time',
        time: {
          parser: 'MM/dd/yyyy',
          unit: 'month',
          displayFormats: {
            month: 'MMM yyyy'
          }
        },
        title: {
          display: true,
          text: 'Date'
        }
      },
      y: {
        title: {
          position: 'left',
          display: true,
          text: 'Elevation (FT-MSL)'
        }
      }
    },
    chartAreaBorder: {
      borderColor: 'black',
      borderWidth: 10,
      //borderDash: [5, 5],
      borderDashOffset: 5
    },
    imgPlugin: {}
  },
  plugins: [chartAreaBorder, imgPlugin, GradientBgPlugin]
};