Google Half Donut Chart - добавить указатель - PullRequest
Новая
       8

Google Half Donut Chart - добавить указатель

0 голосов
/ 14 апреля 2020

Я пытаюсь создать спидометр (от 0 до 100%) в Google Charts с использованием полудопаточной диаграммы. Я хочу объединить эту половину пончика с визуализацией указателя с одним значением. Я знаю, что есть гистограмма Google, но она не соответствует моим требованиям, поэтому я пробую что-то другое!

Мне удалось создать половину пончика (см. Jfiddle), но я застрял в идеях о том, как показать указатель. Мне бы хотелось, чтобы конечный продукт выглядел следующим образом (вдохновленный обходным решением Excel): Speedometer.png

Одна мысль, которую я имел, заключалась в том, чтобы наложить кольцевую диаграмму на диаграмму ap ie с два среза:

1-й срез: 99% [прозрачный], 2-й срез: указатель 1% [черный].

В идеале указатель должен составлять l 1023 * при 92% на половинном пончике. Тем не менее, мой javascript является элементарным, и я не знаю, как go об этом.

Есть ли у кого-нибудь какие-либо предложения о том, как я мог бы создать указатель поверх верхней части диаграммы с половинным пончиком?

Любая помощь с благодарностью! 

google.charts.load('current', {
  callback: function () {
    var data = [
      ['Segment', 'Coverage'],
      ['A',  40.0],
      ['B',  6.2],
      ['C',  3.8],
      [null, 50.0]
    ];

    var total = 0;
    for (var i = 1; i < data.length; i++) {
      if (data[i][0] !== null) {
        total += data[i][1];
      }
    }

    var numberFormat = new google.visualization.NumberFormat({
      pattern: '#',
      suffix: '%'
    });

    var dataTable = google.visualization.arrayToDataTable(data);
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      if (dataTable.getValue(i, 0) !== null) {
        dataTable.setFormattedValue(i, 1, numberFormat.formatValue(((dataTable.getValue(i, 1) / total) * 100)));
      }
    }

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    var options = {
      height: 400,
      chartArea: {
        top: 24
      },
      colors: ['#BFBFBF','#8BC34A', '#228B22'],
      legend: 'none',
      pieHole: 0.6,
      pieStartAngle: 270,
      pieSliceText: 'value',
      slices: {
        3: {
          color: 'transparent'
        }
      },
      theme: 'maximized',
      width: 400
    };

    chart.draw(dataTable, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...