Как показать пустую диаграмму Google, когда нет данных?

Ответ 1

То, что я делаю, это инициализировать мою диаграмму с помощью 1 колонки и 1 точки данных (установлено в 0). Затем, когда данные добавляются, я проверяю, есть ли только 1 столбец и что это фиктивный столбец, а затем я удаляю его. Я также скрываю легенду, чтобы начать, чтобы она не отображалась с фиктивным столбцом, а затем добавляю ее, когда добавляется новый столбец.

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

var data, options, chart;

function drawVisualization() {

  data = google.visualization.arrayToDataTable([
    ['Time', 'dummy'],
    ['', 0],
   ]);

  options = {
    title:"My Chart",
    width:600, height:400,
    hAxis: {title: "Time"},
    legend : {position: 'none'}
  };

  // Create and draw the visualization.
  chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  chart.draw(data,options);
  setTimeout('addData("12:00",10)',2000);
  setTimeout('addData("12:10",20)',3000);
}

function addData(x,y) {
  if(data.getColumnLabel(1) == 'dummy') {
    data.addColumn('number', 'Your Values', 'col_id');
    data.removeColumn(1);
    options.legend = {position: 'right'};
  }

  data.addRow([x,y]);
  chart.draw(data,options);
}​

Ответ 2

Еще лучшим решением для этой проблемы может быть использование столбца аннотации вместо столбца данных, как показано ниже. С помощью этого решения вам не нужно использовать какой-либо setTimeout или настраиваемую функцию, чтобы удалить или скрыть столбец. Попробуйте вставить данный код ниже в Игровая площадка Google Code.

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
      ['', { role: 'annotation' }],
      ['', '']
  ]);

  var ac = new google.visualization.ColumnChart(document.getElementById('visualization'));
  ac.draw(data, {
      title : 'Just a title...',
      width: 600,
      height: 400
  });
}

Ответ 3

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

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

function drawChart() {
// Define the chart to be drawn.
  data = new google.visualization.DataTable();
  data.addColumn({type: 'string', label: 'Result'});
  data.addColumn({type: 'number', label: 'Count'});
  data.addRows([
          ['Value A', 0],
          ['Value B', 0]
  ]);

  var opt_pieslicetext = null;
  var opt_tooltip_trigger = null;
  var opt_color = null;
  if (data.getValue(1,1) == 0 && data.getValue(0,1) == 0) {
     opt_pieslicetext='none';
     opt_tooltip_trigger='none'
     data.setCell(1,1,.1);
     opt_color= ['#D3D3D3'];
  } 
  chart = new google.visualization.PieChart(document.getElementById('mydiv'));
  chart.draw(data, {sliceVisibilityThreshold:0, pieSliceText: opt_pieslicetext, tooltip: { trigger: opt_tooltip_trigger }, colors: opt_color } );
}