Как описать дневной график с помощью Google Visualization API? - PullRequest
1 голос
/ 18 марта 2011

Я пытаюсь описать дневной график с помощью API визуализации Google.http://code.google.com/apis/visualization/documentation/reference.html

Объект DataTable выглядит примерно так.

[
{date:'3/1', value:'1000'},  
{date:'3/2', value:'1500'},  
{date:'3/3', value:'1200'},  
{date:'3/4', value:'1300'},  
{date:'3/5', value:'1400'},  
{date:'3/6', value:'1100'},  
{date:'3/7', value:'1200'}
]

С приведенными выше данными на графике показаны недельные записи.

Я хочу описать недельный графикдаже если некоторые данные отсутствуют.

[
{date:'3/1', value:'1000'},  
{date:'3/2', value:'1500'},  
{date:'3/5', value:'1400'},  
{date:'3/7', value:'1200'}  
]

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


Спасибо за вашу информацию.Я попробовал 'interpolateNulls', но не работает, как я ожидал.

С кодом ниже разрыв строки между 3/2 и 3/4.Я хочу, чтобы 3 / 2-3 / 4 были подключены.

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
    google.load("visualization", "1.0", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        var data = [['3/1',1000],['3/2',1300],['3/3',null],['3/4',1800],['3/5',900],['3/6',1200],['3/7',1000]];
        dataTable.addRows(data);
        var options = {cht: 'lc', chds:'0,3000', interpolateNulls: true};

        var chart = new google.visualization.ImageChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 18 марта 2011

В моем мнении просто создайте структуру управления внутри цикла, чтобы проверить все значения .. foreach значение, убедитесь, что оно равно null .

  • Как генерируются эти данные?
  • Вы читаете это откуда-то или оно вводится вручную?

В вашем графике:

chart.draw(data, {interpolateNulls: True, width: 400, height: 240, title: 'Company Performance'});

Я не проверяю себя, я надеюсьэта помощь.

0 голосов
/ 18 марта 2011

Включите запись для каждой даты недели и установите значение отсутствующих значений как ноль.

[
{date:'3/1', value:'1000'},  
{date:'3/2', value:'1500'},   
{date:'3/3', value: null }, 
{date:'3/4', value: null }, 
{date:'3/5', value:'1400'},  
{date:'3/7', value:'1200'}  
]

Один из параметров конфигурации для линейного символа - это interpolateNulls. Используйте

interpolateNulls: True

в вашем методе розыгрыша. РЕДАКТИРОВАТЬ: для работы interpolateNulls тип диаграммы должен быть LineChart, а не ImageLineChart.

Документация по параметрам конфигурации здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...