如何使用 Charts.js 制作一维散点图？答案

【问题标题】：How to make a 1D scatter plot with Charts.js?如何使用 Charts.js 制作一维散点图？
【发布时间】：2021-05-15 16:08:12
【问题描述】：

我正在尝试使用 Charts.js 创建一维散点图。这是我能做的最好的：

我喜欢使用“线”并将其旋转 90 度的视觉效果。但是，我希望图表沿 Y 轴更小。我已经在 Y 轴上设置了display: false，并且将其范围从-0.1 限制为0.1，那我还能做什么呢？

【问题讨论】：

标签： javascript chart.js3

【解决方案1】：

也许在您的canvas 上设置height 可以解决问题。

您还可以使用horizontal 堆积条形图，其中每个条形在其自己的dataset 内定义为floating bar。

请查看以下可运行示例，看看它是如何工作的。

const data = [93.1, 93.4, 93.7, 95.7, 98.2, 103, 105.3, 106.1, 108.2];
const datasets = data.map(v => ({
  data: [[v - 0.03, v + 0.03]],
  backgroundColor: 'rgb(255, 99, 132)'
}));

new Chart('chart', {
  type: 'bar',
  data: {
    labels: [''],
    datasets: datasets
  },
  options: {
    indexAxis: 'y',
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: ctx => data[ctx.datasetIndex]
        }
      }
    },
    interaction: {
      mode: 'x',
    },
    scales: {
      y: {
        stacked: true
      },
      x: {
        max: 110,
        min: 93,
        reverse: true
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<canvas id="chart" height="30"></canvas>

【讨论】：