气泡图：如何避免气泡被截断？ 谷歌可视化

Question

我正在使用 google 可视化气泡图，数据到 x 轴和 Y 轴是动态的。 我在这里面临的问题是气泡被切断并且尺寸也不均匀。

使用以下选项

options = {
                'title': 'Chart',
                'width': '100%',
                'height': 550,
                legend: {position: 'right'},
                vAxis: {
                        title: 'Score',
                    viewWindow: {
                        min: 0,
                        max: 5
                    },

                    baselineColor: {
                       color: '#4c78c6', 
                    },
                    sizeAxis : {minValue: 0,  maxSize: 15},
                    ticks: [1, 2, 3, 4, 5]
                },
                hAxis: {
                    title: 'Years',
                    baselineColor: {
                       color: '#4c78c6', 
                    }
                },
                sizeAxis : {minValue: 0,  maxSize: 15},
                bubble: {
                    textStyle: {
                        color: 'none',
                    }
                },
                tooltip: {
                    isHtml: true,
                },
                colors: colors,
                chartArea: { width: "30%", height: "50%" }
            };

编辑数据传递给

var rows = [
    ['ID','YEAR','SCORE', 'AVG1', 'AVG']
    ['Deka marc', 2.5, 5, '76-100%', 100]
    ['Max cala',  28.2,3.4,'76-100%', 77]
    ['shane root',4.2, 1, '0-25%', 0]
]
var data = google.visualization.arrayToDataTable(rows);

从上面的数组中，我在悬停时删除元素 3，因为不希望在工具提示中显示。 AVG1 列用于图例

像这样得到o/p

Answer 1

用

var rangeX = data.getColumnRange(1);

知道列的范围然后使用

hAxis: {
  viewWindow: { 
            min: rangeX.min-10,
            max: rangeX.max+10
            }
       },
}

对 yAxis 做类似的事情

https://jsfiddle.net/geniusunil/nt4ymrLe/4/

Answer 2

在 hAxis 内添加 viewWindow 选项。 这是一个示例代码：

viewWindow: { 
            min: 0,
            max: 40
            }

您可以根据要显示的数据集中的最大值更改 max。 我的意思是如果是 30（如你的例子），你可以设置最大值：40，或者如果是 75，你可以设置最大值等于 85。

JSfiddle在这里。

Answer 3

动态查找每个轴的范围，使用数据表方法--> getColumnRange

那么您可以使用ticks选项来增加范围。

var rangeX = data.getColumnRange(1);
var ticksX = [];
for (var i = (Math.floor(rangeX.min / 10) * 10); i <= (Math.ceil(rangeX.max / 10) * 10); i = i + 10) {
  ticksX.push(i);
}

var rangeY = data.getColumnRange(2);
var ticksY = [];
for (var i = Math.floor(rangeY.min) - 1; i <= Math.ceil(rangeY.max) + 1; i++) {
  ticksY.push(i);
}

为了使气泡的大小均匀，请将minSize和maxSize设置为相同的值。

sizeAxis : {minSize: 15,  maxSize: 15},

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

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var rows = [ ['ID','YEAR','SCORE', 'AVG1', 'AVG'], ['Deka marc', 2.5, 5, '76-100%', 100], ['Max cala', 28.2,3.4,'76-100%', 77], ['shane root',4.2, 1, '0-25%', 0] ]; var data = google.visualization.arrayToDataTable(rows); var rangeX = data.getColumnRange(1); var ticksX = []; for (var i = (Math.floor(rangeX.min / 10) * 10); i <= (Math.ceil(rangeX.max / 10) * 10); i = i + 10) { ticksX.push(i); } var rangeY = data.getColumnRange(2); var ticksY = []; for (var i = Math.floor(rangeY.min) - 1; i <= Math.ceil(rangeY.max) + 1; i++) { ticksY.push(i); } var options = { title: 'Chart', width: '100%', height: 550, legend: {position: 'right'}, vAxis: { title: 'Score', baselineColor: { color: '#4c78c6', }, sizeAxis : {minSize: 15, maxSize: 15}, ticks: ticksY }, hAxis: { title: 'Years', baselineColor: { color: '#4c78c6', }, ticks: ticksX }, sizeAxis : {minSize: 10, maxSize: 10}, bubble: { textStyle: { color: 'none', } }, tooltip: { isHtml: true, }, //colors: colors, chartArea: { width: "30%", height: "50%" } }; var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); chart.draw(data, options); });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>

Answer 4

添加最大值和最小值之间的差异的 10%

vAxis: {
         viewWindow: { 
            min: rangeY.min - ((+rangeY.max - rangeY.min) * 10 / 100),
            max: rangeY.max + ((+rangeY.max - rangeY.min) * 10 / 100)
            }
       },

hAxis: {
        viewWindow: { 
            min: rangeX.min - ((+rangeX.max - rangeX.min) * 10 / 100),
            max: rangeX.max + ((+rangeX.max - rangeX.min) * 10 / 100)
            }
       },