Блог

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

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

Любая помощь приветствуется. https://jsfiddle.net/rwhammond/g0fvw3do/8

       google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(initialize);

  function initialize() {
    // The URL of the spreadsheet to source data from.
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1uD7OFv6xDKJdvB7gLBm5WMjeE8442NWZE3XP8gvpqhc/edit#gid=0amp;range=A1:I7');
    query.send(draw);
  }

  function draw(response) {
    var ticketsData = response.getDataTable();
    var options = {
        legend: 'top',
    };
    var view = new google.visualization.DataView(ticketsData);
    view.setColumns([0, 1, {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    }]);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(ticketsData, options, view);
  }
  

первым аргументом draw метода должна быть таблица данных / представление.
в этом случае замените ticketsData на view

 chart.draw(view, options);
  

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

 google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(initialize);

  function initialize() {
    // The URL of the spreadsheet to source data from.
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1uD7OFv6xDKJdvB7gLBm5WMjeE8442NWZE3XP8gvpqhc/edit#gid=0amp;range=A1:I7');
    query.send(draw);
  }

  function draw(response) {
    var ticketsData = response.getDataTable();
    var options = {
        legend: 'top',
    };
    var view = new google.visualization.DataView(ticketsData);
    view.setColumns([0, 
        1,
        {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
      },
      {
      calc: "stringify",
      sourceColumn: 9,
      type: "string",
      role: "annotation",
      },
      2,
        {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
      },
      {
      calc: "stringify",
      sourceColumn: 9,
      type: "string",
      role: "annotation",
      },
      3,
        {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
      },
      {
      calc: "stringify",
      sourceColumn: 9,
      type: "string",
      role: "annotation",
      },
      4,
        {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
      },
      {
      calc: "stringify",
      sourceColumn: 9,
      type: "string",
      role: "annotation",
      },
      5,
        {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
      },
      {
      calc: "stringify",
      sourceColumn: 9,
      type: "string",
      role: "annotation",
      },
      6,
        {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
      },
      {
      calc: "stringify",
      sourceColumn: 9,
      type: "string",
      role: "annotation",
      },
      7,
        {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
      },
      {
      calc: "stringify",
      sourceColumn: 9,
      type: "string",
      role: "annotation",
      },
    ]);

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