Лучшая маркировка в Google BarChart - PullRequest
Новая
       30

Лучшая маркировка в Google BarChart

0 голосов
/ 09 мая 2018

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

 options = {
    title: "- - - - - - - - Low - - - - - - - - - - - - - - - - Middle - - - - - - - - - - - - - - - - - - - - - - High - - - - - ",
    animation: {
      startup: 'true',
      easing: 'linear',
      duration: 500
    },
    height: 100,
    legend: {
      position: 'none'
    },
    hAxis: {
      maxValue: 10,
      minValue: 0,
      ticks: [{
        v: 0,
        f: ''
      }, {
        v: 3,
        f: ''
      }, {
        v: 7,
        f: ''
      }, {
        v: 10,
        f: ''
      }]

    },
    width: 700,
    tooltip: {
      trigger: 'hover'
    },
    backgroundColor: "transparent",
  };

Я сделал скрипку, показывая функции, которые я ищу.Я был бы очень рад, если бы кто-нибудь знал, как решить это правильно:

https://jsfiddle.net/zkcps3h8/2/

Функции, которые представляет скрипка:

  • Имея три секции: Низкая,средний, высокий
  • Наличие линий, разделяющих эти секции
  • Наличие меток под или над этими столбцами

Любой способ решения этой проблемы приветствуется.

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

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

используйте ticks для добавления строк для нужных разделов,
затем используйте эти строки для справки при добавлении меток,
см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var options = {
    animation: {
      startup: 'true',
      easing: 'linear',
      duration: 500
    },
    height: 100,
    legend: {
      position: 'none'
    },
    hAxis: {
      maxValue: 10,
      minValue: 0,
      gridlines: {
        color: '#757575'
      },
      ticks: [{
        v: 0,
        f: ''
      }, {
        v: 3,
        f: ''
      }, {
        v: 7,
        f: ''
      }, {
        v: 10,
        f: ''
      }]
    },
    tooltip: {
      trigger: 'hover'
    },
    backgroundColor: 'transparent',
    chartArea: {
      backgroundColor: 'transparent',
      height: '100%',
      width: '100%',
      top: 60,
      left: 72,
      right: 24,
      bottom: 24
    },
    height: '100%',
    width: '100%'
  };

  var container = document.getElementById('s-graph');
  var data_array = $(container).data('values');
  data_array.unshift(['Something', 'Fun', {role: 'style'}]);
  var data = new google.visualization.arrayToDataTable(data_array);
  var chart = new google.visualization.BarChart(container);

  google.visualization.events.addListener(chart, 'animationfinish', function () {
    var chartElements = container.getElementsByTagName('rect');
    var chartArea = chartElements[0];
    var sectionLabels = ['Low', 'Middle', 'High'];
    var svg = container.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;

    // clone existing label for style, font
    var defaultLabel = container.getElementsByTagName('text')[0];

    var labelIndex = -1;
    var xCoordLeft = parseFloat(chartArea.getAttribute('x'));
    Array.prototype.forEach.call(chartElements, function(rect) {
      if (rect.getAttribute('fill') === options.hAxis.gridlines.color) {
        if (labelIndex > -1) {
          var xCoordRect = parseFloat(rect.getAttribute('x'));
          var xCoordLabel = ((xCoordRect - xCoordLeft) / 2) + xCoordLeft;

          // top label
          var label = defaultLabel.cloneNode(true);
          label.setAttribute('x', xCoordLabel);
          label.setAttribute('y', chartArea.getAttribute('y'));
          label.textContent = sectionLabels[labelIndex];
          svg.appendChild(label);

          // adjust for length of label
          var labelBounds = label.getBBox();
          xCoordLabel = xCoordLabel + (labelBounds.width / 2);
          label.setAttribute('x', xCoordLabel);

          // bottom label
          label = label.cloneNode(true);
          label.setAttribute('y', parseFloat(chartArea.getAttribute('height')) + parseFloat(chartArea.getAttribute('y')) + labelBounds.height);
          svg.appendChild(label);
          xCoordLeft = xCoordRect;
        }
        labelIndex++;
      }
    });
  });

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div data-values="[[&quot;Tom&quot;, 7.2, &quot;#ed341c&quot;], [&quot;Nisse&quot;, 6.4, &quot;#16593a&quot;]]" id="s-graph"></div>

примечание: внесенные вручную изменения не будут отображаться при использовании метода диаграммы getImageURI,
, если вам нужно изображение диаграммы, вы можете использовать html2canvas

0 голосов
/ 09 мая 2018

Вы можете сделать это через свойство ticks в hAxis

Оформить заказ https://jsfiddle.net/5dqhxbqq/

И здесь - документация на него. hAxis.ticks

...