如何创建单线气泡 Chartjs 图表？

Question

我想创建这个图表：

我在想我需要一个气泡图来获得不同大小的气泡，但我不知道如何获得一条线。我尝试使用散点图，但我还是不知道如何获得单行：

哪个图表最适合重新创建此图表？

Answer 1

您可以使所有其他线条的颜色透明，并使用 css 使图表变小，如下所示：

Chart.register(ChartDataLabels)

const options = {
  type: 'bubble',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 0,
        y: 0,
        r: 4
      }, {
        x: 3,
        y: 0,
        r: 8
      }, {
        x: 6,
        y: 0,
        r: 4
      }],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      datalabels: {
        align: 'end',
        color: 'purple',
        formatter: (point, ctx) => (
          ((ctx.dataset.data.length - 1) === ctx.dataIndex) ? point.x : ''
        )
      },
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        grid: {
          borderColor: 'transparent'
        }
      },
      y: {
        ticks: {
          display: false
        },
        grid: {
          color: (ctx) => (ctx.tick.value === 0 ? 'rgba(0,0,0,0.1)' : 'transparent')
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas {
  max-height: 70px
}

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
</body>

如何创建单线气泡 Chartjs 图表？

How to Create Single line bubble Chartjs chart?

javascript

chart.js