单独更改散点图的点大小-- ChartJS

7gs2gvoe 于 2022-11-23 发布在 Chart.js

关注(0)|答案(3)|浏览(240)

如何更改散点图中每个不同点的大小？

var scatterChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Scatter Dataset',
      data: [{
        x: -10,
        y: 0
      }, {
        x: 0,
        y: 15
      }, {
        x: 10,
        y: 5,
      }],
      pointRadius: 15,
      fill: false,
      pointHoverRadius: 20
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
      }]
    }
  }
});

在此之后，我想改变我 AJAX 响应数据中的每个点的大小。
我试着做这个 * 没有星星ofc*：

data: [{
  x: -10,
  y: 0
}, {
  x: 0,
  y: 15
}, {
  x: 10,
  y: 5,
  pointRadius: 15,
  *
}],

但没有成功。

chart.js

来源：https://stackoverflow.com/questions/63831601/change-dot-size-individually-scatter-chart-chartjs

3条答案

按热度按时间

ruyhziif1#

您应该使用bubble chart，它接受每个数据点的泡泡半径（以像素为单位）（属性r）。
请看这个sample chart。

赞(0）回复(0）举报 2022-11-23

tsm1rwdh2#

您可以将每个点放在单独系列中。
这将允许您指定单独的半径。

datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: -10,
                y: 0

            }],
            pointRadius: 10,
            fill: false,
            pointHoverRadius: 20
        }, {
            label: 'hidden',
            data: [{
                x: 0,
                y: 15,

            }],
            pointRadius: 20,
            fill: false,
            pointHoverRadius: 20
        }, {
            label: 'hidden',
            data: [{
                x: 10,
                y: 5,
            }],
            pointRadius: 30,
            fill: false,
            pointHoverRadius: 20
        }]

并且为了防止显示多个图例条目，
我们可以过滤掉除一个序列标签之外的所有序列标签。

legend: {
            labels: {
                filter: function(item, chart) {
                    return (item.text !== 'hidden');
                }
            }
        },

请参阅以下工作代码段...
第一次

赞(0）回复(0）举报 2022-11-23

pkln4tw63#

我发现可以为pointRadius和pointStyle属性指定一个值数组：

datasets: [
      {
        label: "Plan",
        data: [10, 15, 5],
        pointRadius: [10, 5, 15],
        pointStyle: ["rect", "rect", "circle"],
      },
    ],

这样，您就可以单独指定每个点的大小

赞(0）回复(0）举报 2022-11-23

我来回答

单独更改散点图的点大小-- ChartJS

3条答案

相关问题

热门标签

最新问答