График пузырьков: как избежать среза пузырьков?гугл визуализация - PullRequest
Новая
       45

График пузырьков: как избежать среза пузырьков?гугл визуализация

1 голос
/ 21 июня 2019

Я использую визуализацию 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 вот так enter image description here

Ответы [ 2 ]

0 голосов
/ 23 июня 2019

, чтобы найти диапазон каждой оси динамически, используйте метод таблицы данных -> 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>
0 голосов
/ 21 июня 2019

Добавить внутрь, чтобы использовать опцию viewWindow.Это пример кода: 

viewWindow: { 
            min: 0,
            max: 40
            }

Вы можете изменить макс в соответствии с вашим самым большим значением в наборе данных, который вы хотите показать.Я имею в виду, что если 30 (как в вашем примере), вы можете установить max: 40, или, если 75, вы можете установить max равным 85.

JSfiddle здесь .

...