Ярлыки пузырьковых диаграмм Google

Я создал пузырьковую диаграмму Google и пытаюсь изменить положение меток.

Пузырьковая диаграмма

Я пытаюсь изменить положение меток, чтобы они не перекрывали пузыри. Я приветствовал бы любые предложения, а также любые советы относительно того, как я мог бы реализовать это.

Спасибо заранее.

Это код, который у меня есть:

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);


function drawSeriesChart() {


  var data = google.visualization.arrayToDataTable([
    ['ID', 'Actionability (100)', 'Likelihood (100)', 'Megatrend', 'Impact (50)'],
    ['Income eqality', -40, -10, 'Megacities', 50],
    ['Pressure on cities', 80, 53, 'Megacities', 50],
    ['Rise of local gov', 70, 60, 'Megacities', 40],
    ['Focus on quality of life', 50, 30, 'Megacities', 40],
    ['Focus on education', -40, -40, 'Megacities', 33],
    ['City as cultural hub', -70, -27, 'Megacities', 32],
    ['Backlash vs erosion of values', -75, -25, 'Megacities', 40],
    ['Gateway drugs', -80, 50, 'Megacities', 33],
    ['Affordable connectivity', 75, 80, 'Connected communities', 50],
    ['Smart machines', 15, 63, 'Connected communities', 35],
    ['Mobile money standard', 70, 10, 'Connected communities', 40],
    ['High yielding african tech', 68, 45, 'Connected communities', 40],
    ['Telecoms giants', -30, 60, 'Connected communities', 40],
    ['Affordable access to power', 40, 40, 'Connected communities', 37],
    ['Drones', 25, 10, 'Connected communities', 35],
    ['Sharing economy', 10, 60, 'Connected communities', 38],
    ['Sales adopt traditional market', -90, -35, 'Connected communities', 34],
    ['Import substitution', -30, 35, 'The savvy consumer', 40],
    ['Low cost aerial cargo', 30, 35, 'The savvy consumer', 33],
    ['Hybrid financing', -70, 32, 'The savvy consumer', 33],
    ['Experience value', 40, 10, 'The savvy consumer', 35],
    ['Local artist influence', -20, 10, 'The savvy consumer', 35],
    ['Preference for young African brands', 50, 48, 'The savvy consumer', 45],
    ['Cut out middleman', 60, 25, 'The savvy consumer', 45],
    ['Manufacturing growth', 40, 75, 'Diversification drive', 45],
    ['SME formalisation', -20, 65, 'Diversification drive', 45],
    ['New business adopts formalised economics', -20, 45, 'Diversification drive', 45],
    ['Pressure to resist mechanisation', -60, 10, 'Diversification drive', 33],
    ['Greater role in backward integration', -50, 40, 'Diversification drive', 33],
    ['Industrialise vs protect ecosystems', -80, 60, 'Diversification drive', 40],
    ['Women-led business', 10, 50, 'Female first', 33],
    ['Women access to finance', 10, 46, 'Female first', 37],
    ['Dual income households rising', 60, 56, 'Female first', 33],
    ['Tech for women', 20, 26, 'Female first', 33],
    ['Greater role for women', 15, 30, 'Female first', 33],
    ['Target illicit financial flows', 5, 5, 'Sustainable solutions', 33],
    ['Impact reporting growth', 65, 40, 'Sustainable solutions', 39],
    ['New business models for social challenges', 45, 60, 'Sustainable solutions', 39],
    ['Sustainable finance models', -10, 60, 'Sustainable solutions', 33],
    ['Citizens voicing themselves', -80, 55, 'Sustainable solutions', 33],
    ['Health & education priority', 35, 55, 'Sustainable solutions', 38],
    ['Sustainability driven companies', 45, 52, 'Sustainable solutions', 36]
  ]);


  var options = {
    title: 'Diageo Futures - Sub-trend matrix',
    hAxis: {
      title: 'Actionability'
    },
    hAxis: {
      maxValue: '120'
    },
    hAxis: {
      textposition: 'in'
    },
    hAxis: {
      gridlines: {
        color: 'white'
      }
    },
    theme: 'maximized',
    axisTitlesPosition: 'in',
    vAxis: {
      title: 'Likelihood'
    },
    vAxis: {
      maxValue: '170'
    },
    vAxis: {
      gridlines: {
        color: 'white'
      }
    },
    bubble: {
      textStyle: {
        fontSize: 10,
        fontName: 'arial',
        auraColor: 'none'
      }
    }
  };


  var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
  chart.draw(data, options);
}

person cooketsc    schedule 13.11.2016    source источник


Ответы (1)


нет стандартных вариантов размещения ярлыков

но метками можно управлять вручную, как только сработает событие 'ready'

см. следующий рабочий фрагмент...

google.charts.load('current', {
  callback: drawSeriesChart,
  packages: ['corechart']
});

function drawSeriesChart() {
  var data = google.visualization.arrayToDataTable([
    ['ID', 'Actionability (100)', 'Likelihood (100)', 'Megatrend', 'Impact (50)'],
    ['Income eqality', -40, -10, 'Megacities', 50],
    ['Pressure on cities', 80, 53, 'Megacities', 50],
    ['Rise of local gov', 70, 60, 'Megacities', 40],
    ['Focus on quality of life', 50, 30, 'Megacities', 40],
    ['Focus on education', -40, -40, 'Megacities', 33],
    ['City as cultural hub', -70, -27, 'Megacities', 32],
    ['Backlash vs erosion of values', -75, -25, 'Megacities', 40],
    ['Gateway drugs', -80, 50, 'Megacities', 33],
    ['Affordable connectivity', 75, 80, 'Connected communities', 50],
    ['Smart machines', 15, 63, 'Connected communities', 35],
    ['Mobile money standard', 70, 10, 'Connected communities', 40],
    ['High yielding african tech', 68, 45, 'Connected communities', 40],
    ['Telecoms giants', -30, 60, 'Connected communities', 40],
    ['Affordable access to power', 40, 40, 'Connected communities', 37],
    ['Drones', 25, 10, 'Connected communities', 35],
    ['Sharing economy', 10, 60, 'Connected communities', 38],
    ['Sales adopt traditional market', -90, -35, 'Connected communities', 34],
    ['Import substitution', -30, 35, 'The savvy consumer', 40],
    ['Low cost aerial cargo', 30, 35, 'The savvy consumer', 33],
    ['Hybrid financing', -70, 32, 'The savvy consumer', 33],
    ['Experience value', 40, 10, 'The savvy consumer', 35],
    ['Local artist influence', -20, 10, 'The savvy consumer', 35],
    ['Preference for young African brands', 50, 48, 'The savvy consumer', 45],
    ['Cut out middleman', 60, 25, 'The savvy consumer', 45],
    ['Manufacturing growth', 40, 75, 'Diversification drive', 45],
    ['SME formalisation', -20, 65, 'Diversification drive', 45],
    ['New business adopts formalised economics', -20, 45, 'Diversification drive', 45],
    ['Pressure to resist mechanisation', -60, 10, 'Diversification drive', 33],
    ['Greater role in backward integration', -50, 40, 'Diversification drive', 33],
    ['Industrialise vs protect ecosystems', -80, 60, 'Diversification drive', 40],
    ['Women-led business', 10, 50, 'Female first', 33],
    ['Women access to finance', 10, 46, 'Female first', 37],
    ['Dual income households rising', 60, 56, 'Female first', 33],
    ['Tech for women', 20, 26, 'Female first', 33],
    ['Greater role for women', 15, 30, 'Female first', 33],
    ['Target illicit financial flows', 5, 5, 'Sustainable solutions', 33],
    ['Impact reporting growth', 65, 40, 'Sustainable solutions', 39],
    ['New business models for social challenges', 45, 60, 'Sustainable solutions', 39],
    ['Sustainable finance models', -10, 60, 'Sustainable solutions', 33],
    ['Citizens voicing themselves', -80, 55, 'Sustainable solutions', 33],
    ['Health & education priority', 35, 55, 'Sustainable solutions', 38],
    ['Sustainability driven companies', 45, 52, 'Sustainable solutions', 36]
  ]);


  var options = {
    axisTitlesPosition: 'in',
    bubble: {
      textStyle: {
        fontSize: 10,
        fontName: 'Arial',
        auraColor: 'none'
      }
    },
    hAxis: {
      gridlines: {
        color: 'white'
      },
      maxValue: 120,
      textposition: 'in',
      title: 'Actionability'
    },
    height: 400,
    theme: 'maximized',
    title: 'Diageo Futures - Sub-trend matrix',
    vAxis: {
      gridlines: {
        color: 'white'
      },
      maxValue: 170,
      title: 'Likelihood'
    }
  };


  var container = document.getElementById('series_chart_div');
  var chart = new google.visualization.BubbleChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
      if (text.getAttribute('text-anchor') === 'middle') {
        var adjY = ((index % 2) === 0) ? -1 : 1;
        text.setAttribute('y', parseFloat(text.getAttribute('y')) + (adjY * 8));
      }
    });
  });
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="series_chart_div"></div>

кроме того, параметры для vAxis и hAxis должны быть включены в один объект, а не в несколько (и maxValue должно быть числом, а не строкой)...

e.g.

hAxis: {
  gridlines: {
    color: 'white'
  },
  maxValue: 120,
  textposition: 'in',
  title: 'Actionability'
},

vs.

hAxis: {
  title: 'Actionability'
},
hAxis: {
  maxValue: '120'
},
hAxis: {
  textposition: 'in'
},
hAxis: {
  gridlines: {
    color: 'white'
  }
},
person WhiteHat    schedule 13.11.2016