将水平折线图更改为垂直线

Question

我正在使用 chartjs 生成一个包含 2 个数据集的折线图，x 轴上有 2 个不同的数据标签。

目前我的图表如下所示 current horizontal line chart

我想让我的折线图垂直，这样 x 轴（日期）移动到 y 轴，Y 轴（数字）移动到 x 轴。我在 JS 脚本的选项中添加了一个 indexAxis: 'y' 但它似乎不起作用并且我的折线图不再显示任何线条。谁能告诉我我的代码出了什么问题？谢谢

const data = {
      datasets: [
        {label: 'PZ-1',
        data: [
          {x:'2022-03-01', y:3},
          {x:'2022-03-02', y:6},
          {x:'2022-03-03', y:9},
          {x:'2022-03-04', y:8}
        ],
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)'
        ],
        borderWidth: 1},
        {label: 'PZ-2',
        data: [
          {x:'2022-03-03', y:10},
          {x:'2022-03-04', y:12},
          {x:'2022-03-05', y:13},
          {x:'2022-03-06', y:10}
        ],
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)'
        ],
        borderWidth: 1},
    ]
    };
    // config 
    const config = {
      type: 'line',
      data,
      options: {
        indexAxis: 'y',
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };
    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

* {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }
      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(255, 26, 104, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 1000px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(255, 26, 104, 1);
        background: white;
      }

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Line Chart</title>
  </head>
  <body>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    </body>
</html>

Answer 1

你需要调整你的数据，你仍然提供你的数据，就好像你的x轴是索引轴。

要解决您的问题，请更改数据对象中的 x 和 y 键，它将正常工作：

data: [{
    y: '2022-03-01',
    x: 3
  },
  {
    y: '2022-03-02',
    x: 6
  },
  {
    y: '2022-03-03',
    x: 9
  },
  {
    y: '2022-03-04',
    x: 8
  }
],

实时样本：

const data = {
  datasets: [{
      label: 'PZ-1',
      data: [{
          y: '2022-03-01',
          x: 3
        },
        {
          y: '2022-03-02',
          x: 6
        },
        {
          y: '2022-03-03',
          x: 9
        },
        {
          y: '2022-03-04',
          x: 8
        }
      ],
      backgroundColor: [
        'rgba(255, 26, 104, 0.2)'
      ],
      borderColor: [
        'rgba(255, 26, 104, 1)'
      ],
      borderWidth: 1
    },
    {
      label: 'PZ-2',
      data: [{
          y: '2022-03-03',
          x: 10
        },
        {
          y: '2022-03-04',
          x: 12
        },
        {
          y: '2022-03-05',
          x: 13
        },
        {
          y: '2022-03-06',
          x: 10
        }
      ],
      backgroundColor: [
        'rgba(255, 26, 104, 0.2)'
      ],
      borderColor: [
        'rgba(255, 26, 104, 1)'
      ],
      borderWidth: 1
    },
  ]
};
// config 
const config = {
  type: 'line',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};
// render init block
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Line Chart</title>
</head>

<body>
  <div class="chartCard">
    <div class="chartBox">
      <canvas id="myChart"></canvas>
    </div>
  </div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</body>

</html>

将水平折线图更改为垂直线

Change horizontal line chart to vertical line

html

javascript

chart.js