ChartJS气泡图-基于固定高度图表控制半径像素大小以防止过大气泡

w3nuxt5m 于 2023-08-05 发布在 Chart.js

关注(0)|答案(1)|浏览(170)

我在ChartJS中了解到，基于“radius”的文档（在这里找到：org/docs/latest/charts/bubble. html #styling），“半径”控制气泡的大小。
我有一个图表，其中半径是基于特定类型的值的“计数”，有时可能是非常大的数字，因此使气泡的方式太大，因为视图的高度只有400像素（重新：下面的截图看起来像什么）。
有没有办法控制半径的尺度。因此，例如，气泡的最大半径是“100 px”，然后它从“100 px”向下变小（例如，它按比例缩小数字？）.
x1c 0d1x的数据
以下是我当前的“选项”配置以供参考：

{
    "maintainAspectRatio": false,
    "responsive": true,
    "animation": {
        "duration": 150
    },
    "scales": {
        "y": {
            "beginAtZero": true,
            "title": {
                "display": true,
                "text": "Paid Clicks"
            }
        },
        "x": {
            "beginAtZero": true,
            "title": {
                "display": true,
                "text": "Paid Conversions"
            }
        }
    },
    "plugins": {
        "tooltip": {
            "callbacks": {}
        },
        "datalabels": {
            "display": false
        }
    }
}

字符串

chart.js

来源：https://stackoverflow.com/questions/76584436/chartjs-bubble-chart-control-the-radius-pixel-size-based-on-fixed-height-chart

1条答案

按热度按时间

pokxtpni1#

找到了一个解决方案，以下是我如何为未来需要这样做的人做的！
步骤#1：将“r”值按最大值“r”缩放

// for dataPoints, make "r" so 100 is the max radius and everything else is scaled down
    const maxRadius = Math.max(...dataPoints.map((dataPoint: Dataset) => dataPoint.data[0].r));
    dataPoints.forEach((dataPoint: Dataset) => {
        dataPoint.data[0].r = Math.round(dataPoint.data[0].r / maxRadius * MAX_ALLOWED_BUBBLE_RADIUS);
    });

字符串
第2步：我使用的是数据标签w/https://chartjs-plugin-datalabels.netlify.app/，所以我需要获取“非缩放值”以包含在数据标签中。为此，我在选项中执行了以下操作：

plugins: {
        tooltip: {
            callbacks: {
                label: function(context: any) {
                    const label = `Group: ${context.dataset.label}`;
                    // need to get original count, since we scaled it down for the bubble chart
                    const countDatapoint = originalData.filter((dataObj: DataObject) => dataObj.label === context.dataset.label)[0].datapoint;
                    const rLabel = `Count: ${countDatapoint}`;
                    return [label, rLabel];
                }
            }
        },
    },

型

赞(0）回复(0）举报 2023-08-05

我来回答

ChartJS气泡图-基于固定高度图表控制半径像素大小以防止过大气泡

1条答案

相关问题

热门标签

最新问答