Google Charts: анимация не работает для одного графика, указывая аннотации в области заголовка - PullRequest
Новая
       74

Google Charts: анимация не работает для одного графика, указывая аннотации в области заголовка

0 голосов
/ 11 июня 2018

Я немного новичок в Google Chart, я пытался изучить его, но у меня возникли две проблемы с моим графиком:

1) Я не уверен, почему отображается второй (красный) графикбез анимации

2) Как расширить строки аннотации со значениями до верхней части моего графика?В лучшем случае значения будут отображаться под заголовком диаграммы 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data1 = new google.visualization.DataTable();

      data1.addColumn('number', 'x');
      data1.addColumn('number', 'green');

      data1.addRows([
        [0.005, 3],
        [0.006, 6],
        [0.007, 5],
        [0.008, 8],
        [0.009, 2],
        [0.010, 5],
        [0.011, 5],
        [0.012, 4],
        [0.013, 8]
      ]);

      var data2 = new google.visualization.DataTable();
      data2.addColumn('number', 'x');
      data2.addColumn('number', 'red');

      data2.addRows([
        [0.016, 5],
        [0.017, 1],
        [0.018, 3],
        [0.019, 9],
        [0.020, 4],
        [0.021, 5],
        [0.022, 7],
        [0.023, 7],
        [0.024, 3]
      ]);


      var joinedData = google.visualization.data.join(data1, data2, 'full',
        [[0, 0]], [1], [1]);

      var options = {
        title: 'Playground',
        colors: ['#007F01', '#FE0002'],
        interpolateNulls: true,
        hAxis: {
          title: 'Price',
          titleTextStyle: {
            color: '#333'
          },
          direction: 1,
          format: 'decimal'
        },
        vAxis: {
          direction: 1
        }, 
        orientation: 'horizontal', 

        // customize colum
        series: {
          0: {type: "area"},
          1: {type: "area"},
        },

        // legend: {position : 'left'},
        animation: {
          startup: true,
          duration: 1000,
          easing: 'out',
        }
      };

      var view = new google.visualization.DataView(joinedData);
      view.setColumns([0,
        1,
        {
          calc: "stringify",
          sourceColumn: 1,
          type: "string",
          role: "annotation"
        },
        2,
        {
          calc: "stringify",
          sourceColumn: 2,
          type: "string",
          role: "annotation"
        }
      ]);


      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(view, options);

    }
  </script>
</head>

<body>
  <div id="chart_div" style="width: 100%; height: 500px;"></div>

</body>

</html>

Здесь вы можете запустить его: jsfiddle

1 Ответ

0 голосов
/ 11 июня 2018

ошибка в диаграммах Google при работе с представлениями данных и анимацией.
Простое решение - преобразовать представление обратно в таблицу данных при рисовании диаграммы ... 

view.toDataTable()

например

chart.draw(view.toDataTable(), options);

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data1 = new google.visualization.DataTable();

  data1.addColumn('number', 'x');
  data1.addColumn('number', 'green');

  data1.addRows([
    [0.005, 3],
    [0.006, 6],
    [0.007, 5],
    [0.008, 8],
    [0.009, 2],
    [0.010, 5],
    [0.011, 5],
    [0.012, 4],
    [0.013, 8]
  ]);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'x');
  data2.addColumn('number', 'red');

  data2.addRows([
    [0.016, 5],
    [0.017, 1],
    [0.018, 3],
    [0.019, 9],
    [0.020, 4],
    [0.021, 5],
    [0.022, 7],
    [0.023, 7],
    [0.024, 3]
  ]);


  var joinedData = google.visualization.data.join(data1, data2, 'full',
    [[0, 0]], [1], [1]);

  var options = {
    title: 'Playground',
    colors: ['#007F01', '#FE0002'],
    interpolateNulls: true,
    hAxis: {
      title: 'Price',
      titleTextStyle: {
        color: '#333'
      },
      direction: 1,
      format: 'decimal'
    },
    vAxis: {
      direction: 1
    },
    orientation: 'horizontal',

    // customize colum
    series: {
      0: {type: "area"},
      1: {type: "area"},
    },

    // legend: {position : 'left'},
    animation: {
      startup: true,
      duration: 1000,
      easing: 'out',
    }
  };

  var view = new google.visualization.DataView(joinedData);
  view.setColumns([0,
    1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2,
    {
      calc: "stringify",
      sourceColumn: 2,
      type: "string",
      role: "annotation"
    }
  ]);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>

ОБНОВЛЕНИЕ

Что касается расширения строк аннотации,
Вы можете изменить длину,
но это только увеличит размер каждого,
, и они все равно не будут выровнены по верху 

annotations: {
  stem: {
    length: 10
  }
},

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

1) диаграмма переместит их назад, в любое время, когда есть интерактивность, например, наведение меток или точек данных

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

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

, чтобы исправить это, используйте html2canvas , чтобы получить изображение вместо метода диаграммы

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data1 = new google.visualization.DataTable();

  data1.addColumn('number', 'x');
  data1.addColumn('number', 'green');

  data1.addRows([
    [0.005, 3],
    [0.006, 6],
    [0.007, 5],
    [0.008, 8],
    [0.009, 2],
    [0.010, 5],
    [0.011, 5],
    [0.012, 4],
    [0.013, 8]
  ]);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'x');
  data2.addColumn('number', 'red');

  data2.addRows([
    [0.016, 5],
    [0.017, 1],
    [0.018, 3],
    [0.019, 9],
    [0.020, 4],
    [0.021, 5],
    [0.022, 7],
    [0.023, 7],
    [0.024, 3]
  ]);


  var joinedData = google.visualization.data.join(data1, data2, 'full',
    [[0, 0]], [1], [1]);

  var options = {
    annotations: {
      stem: {
        length: 10
      }
    },
    title: 'Playground',
    colors: ['#007f01', '#fe0002'],
    interpolateNulls: true,
    hAxis: {
      title: 'Price',
      titleTextStyle: {
        color: '#333'
      },
      direction: 1,
      format: 'decimal'
    },
    vAxis: {
      direction: 1
    },
    orientation: 'horizontal',

    // customize colum
    series: {
      0: {type: "area"},
      1: {type: "area"},
    },

    // legend: {position : 'left'},
    animation: {
      startup: true,
      duration: 1000,
      easing: 'out',
    }
  };

  var view = new google.visualization.DataView(joinedData);
  view.setColumns([0,
    1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2,
    {
      calc: "stringify",
      sourceColumn: 2,
      type: "string",
      role: "annotation"
    }
  ]);

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

  var observer = new MutationObserver(moveAnnotations);
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  function moveAnnotations() {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();

    var labels = container.getElementsByTagName('text');
    var labelSize = 0;
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        if (options.colors.indexOf(label.getAttribute('fill')) > -1) {
          labelSize = (parseFloat(label.getAttribute('font-size')) / 2);
          label.setAttribute('y', chartBounds.top + labelSize);
        }
      }
    });

    var stems = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(stems, function(stem) {
      if ((parseInt(stem.getAttribute('height')) === options.annotations.stem.length) && (stem.getAttribute('fill') === '#999999')) {
        var height = parseFloat(stem.getAttribute('y')) - chartBounds.top;
        stem.setAttribute('height', height);
        stem.setAttribute('y', chartBounds.top + labelSize);
      }
    });
  }

  chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Примечания:

1) функция перемещения (moveAnnotations) использует colors из options для идентификацииметки аннотаций от остальных меток диаграммы
диаграмма меняет все цвета на строчные, поэтому пришлось изменить colors в options на строчные

2) функция перемещения также использует опцию annotations.stem.length дляопределить строки аннотации

...