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

Question

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

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响应数据更改每个点的大小。

我尝试这样做没有c之星：

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

但没有成功。

Answer 1

您应该使用气泡图，它接受每个

数据点

的气泡半径（属性r）。

请看一下这个示例图表。

Answer 2

我发现你可以为

pointRadius

和

pointStyle

属性指定一个值数组：

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

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

Answer 3

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

        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');
                }
            }
        },

请参阅以下工作片段...

$(document).ready(function() {
    var scatterChart = new Chart(document.getElementById('chart').getContext('2d'), {
        type: 'scatter',
        data: {
            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
            }]
        },
        options: {
            legend: {
                labels: {
                    filter: function(item, chart) {
                        return (item.text !== 'hidden');
                    }
                }
            },
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                }]
            }
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

Answer 4

正如您在我的代码片段中看到的，pointRadius 可以是一个函数，它将在运行时调用，其中包含许多您可能感兴趣的参数。其中之一是点的值，您可以使用它来动态缩放点的大小。

我要感谢其他给予我答案的人，他们激发了我对答案的追求，当然还有图表 JS 创建者，他们创造了所有这些精彩的图表库。

$(document).ready(function() {
    var scatterChart = new Chart(document.getElementById('chart').getContext('2d'), {
        type: 'scatter',
        data: {
datasets: [
  {
    label: "Plan",
    data: [{x:10, y:10}, {x:15, y:15}, {x:5, y:5}],
    pointRadius: (pt) => {/*console.log(Object.keys(pt));*/ return pt.parsed.y;},
    pointStyle: "rect",
  },
],

        },
        
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

<canvas id="chart"></canvas>