时间戳

首页 > 解决方案 > 如何使用 Charts.js 制作一维散点图？

javascript - 如何使用 Charts.js 制作一维散点图？

问题描述

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

我尝试一维散点图

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

标签： javascriptchart.js3

解决方案

也许设置height你的canvas将解决问题。

您还可以使用水平堆积条形图，其中每个条形都定义为它自己的浮动条形dataset。

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

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>

推荐阅读