使用 chart.js 作为同位素模式

Question

我正在尝试编写一个同位素模式计算器，并希望将生成的模式可视化，它应该看起来像这样： [同位素模式][1]

因此，我想到了使用条形图和chart.js。但是，我发现的所有示例都有数月或数年的时间来标记 x 轴。但我需要一个用于散点图类型的“正常”x 轴，以便条形包含在数字之间，而不是总是直接位于标签上方。

可以使用 chart.js（或替代方法）来完成吗？

谢谢，塞尔德里 [1]: https://i.stack.imgur.com/Jqtl8.png

Answer 1

您可以将比例尺设为线性比例尺，只需提供 x 和 y 作为坐标即可。

var options = {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Nice label',
      data: [{
        x: 10,
        y: 5
      }, {
        x: 13,
        y: 3
      }, {
        x: 20,
        y: 8
      }, {
        x: 22,
        y: 15
      }],
      backgroundColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear',
        ticks: {
          maxTicksLimit: 4
        },
        grid: {
          display: false
        }
      },
      y: {
        grid: {
          display: false
        }
      }
    }
  }
}

var 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.6.0/chart.js"></script>
</body>

使用 chart.js 作为同位素模式

Using chart.js for isotopic patterns

html

javascript

charts

chart.js