如何创建纵轴（Y 轴）为字符串的图表？

Question

我要制作的图表是使用 Chart.js 制作的折线图，纵轴为字符串，横轴为数字。 例如，横轴是时间，纵轴是帽子的颜色。 见下图

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21],//Number of frames
    datasets: [{
      label: 'The colour of the hat of the person in the frame',
      data: ["red","blue","red","blue","yeallow","red","blue","red","blue","yeallow",.....],
      borderColor: '#f88',
    }],
  }
});

图形图像

Answer 1

是的，您必须将您的 y 比例设置为类别，还为其提供一个标签数组，然后在您的数据数组中您可以提及这些标签：

 const options = { type: 'line', data: { labels: [1, 2, 3, 4, 5, 6], datasets: [{ label: '# of Points', data: ["Blue", "Red", "Red", "Orange", "Green", "Orange"], borderColor: 'pink' }] }, options: { scales: { y: { type: 'category', labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"] }, } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script> </body>

如何创建纵轴（Y 轴）为字符串的图表？

问题描述

1 个解决方案

解决方案1
0 2022-02-04 13:06:30

如何创建纵轴（Y 轴）为字符串的图表？

问题描述

1 个解决方案

解决方案1 0 2022-02-04 13:06:30

解决方案1
0 2022-02-04 13:06:30