Chart.Js vers2 多行到版本 3

Chart.Js vers2 multiline to version 3

我尝试使用 chart.js 3.6.0 版创建一个多轴图表,但它看起来与此处 chart

示例中显示的完全不同

这是我使用的代码。

<canvas id="canvas"></canvas>
<script>
  const ctx = document.getElementById("canvas").getContext("2d");
  ctx.canvas.height = 200;

  const labels = "11/1/2021,11/2/2021,11/3/2021,11/4/2021,11/5/2021,11/6/2021,11/7/2021,11/8/2021,11/9/2021,11/10/2021";
  const data = {
    labels: labels,
    datasets: [
      {
        label: "South",
        data: "6,4,2,4,3,1,0,9,3,0",
        borderColor: "#0d47a1",
        backgroundColor: "#2196f3",
        yAxisID: "y",
      },
      {
        label: "North",
        data: "72,97,88,143,102,0,0,153,100,0",
        borderColor: "#e65100",
        backgroundColor: "#ff9800",
        yAxisID: "y1",
      },
    ],
  };

  const config = {
    type: "line",
    data: data,
    options: {
      responsive: true,
      interaction: {
        mode: "index",
        intersect: false,
      },
      stacked: false,
      plugins: {
        title: {
          display: true,
          text: "Test",
        },
      },
      scales: {
        y: {
          type: "linear",
          display: true,
          position: "left",
        },
        y1: {
          type: "linear",
          display: true,
          position: "right",
          // grid line settings
          grid: {
            drawOnChartArea: false, // only want the grid lines for one axis to show up
          },
        },
        x: {
          ticks: {
            maxRotation: 65,
            minRotation: 65,
            fontSize: 11,
          },
        },
      },
    },
  };

  window.myLine = new Chart(ctx, config);
</script>

为什么线没有连接,为什么y轴不显示每个数据集的最大值?

我的看起来像这样..

这是因为您将标签和数据作为字符串提供,而它应该是一个包含标签字符串的数组,数据字段也是如此:

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
<script>
  const ctx = document.getElementById("canvas").getContext("2d");
  ctx.canvas.height = 200;

  const labels = ['11/1/2021', '11/2/2021', '11/3/2021', '11/4/2021', '11/5/2021', '11/6/2021', '11/7/2021', '11/8/2021', '11/9/2021', '11/10/2021'];
  const data = {
    labels: labels,
    datasets: [{
        label: 'South',
        data: ['6', '4', '2', '4', '3', '1', '0', '9', '3', '0'],
        borderColor: '#0d47a1',
        backgroundColor: '#2196f3',
        yAxisID: 'y',
      },
      {
        label: 'North',
        data: ['72', '97', '88', '143', '102', '0', '0', '153', '100', '0'],
        borderColor: '#e65100',
        backgroundColor: '#ff9800',
        yAxisID: 'y1',
      }
    ]
  };

  const config = {
    type: 'line',
    data: data,
    options: {
      responsive: true,
      interaction: {
        mode: 'index',
        intersect: false,
      },
      stacked: false,
      plugins: {
        title: {
          display: true,
          text: 'Test'
        }
      },
      scales: {
        y: {
          type: 'linear',
          display: true,
          position: 'left',
        },
        y1: {
          type: 'linear',
          display: true,
          position: 'right',

          // grid line settings
          grid: {
            drawOnChartArea: false, // only want the grid lines for one axis to show up
          },
        },

        x: {
          ticks: {
            maxRotation: 65,
            minRotation: 65,
            fontSize: 11
          }
        }

      }
    },
  };

  new Chart(ctx, config);
</script>