Как нарисовать линейные графики Google, если некоторые значения отсутствуют? - PullRequest
Новая
       0

Как нарисовать линейные графики Google, если некоторые значения отсутствуют?

22 голосов
/ 28 июля 2011

Я нашел следующий код JavaScript в Google Chart Tools : 

  function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows(4);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170); // sales for 2005
    data.setValue(1, 2, 460);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(2, 2, 580);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030);
    data.setValue(3, 2, 540);

    var chart = new google.visualization.ImageLineChart(document.getElementById('visualization'));
    chart.draw(data, {width: 500, height: 250, min: 0});
  }

Если я закомментирую строку кода, устанавливающую значение для продаж 2005 года, на графике появится строка Продажи , начиная с 2006 года и заканчивая 2007 годом. Я ожидал увидеть Продажи строки с 2004 года (при Y = 1000) до 2006 года (при Y = 860) и с 2006 года (при Y = 860) до 2007 года (при Y = 1030).

Как мне нарисовать эту диаграмму, если у меня нет значения для продаж 2005 года, но у меня есть значения для 2004, 2006 и 2007 годов?

Фактический результат:

actual chart

Ожидаемый результат: (я добавил значение 930 для продаж 2005 года только для того, чтобы показать, чего я хочу достичь; я надеюсь, что есть лучший способ сделать это без вычисления всех недостающих значений Y для всех серия)

expected chart

1 Ответ

31 голосов
/ 28 июля 2011

Если вы можете использовать javascript-версию этой диаграммы, то вы можете достичь чего-то похожего на то, что вам нужно, используя опцию interpolateNulls, доступную через опции линейной диаграммы .

Вот рабочий пример.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['corechart', 'imagelinechart']});
    </script>
    <script type="text/javascript">
    function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        //data.setValue(1, 1, 1170); // sales for 2005
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.LineChart(document.getElementById('visualization'));
        chart.draw(data, {width: 500, height: 250, min: 0, interpolateNulls: true});
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>
...