В Google Charts, как я могу использовать строку заголовка в arrayToDataTable, а также иметь опции для той же диаграммы? - PullRequest
Новая
       2

В Google Charts, как я могу использовать строку заголовка в arrayToDataTable, а также иметь опции для той же диаграммы?

1 голос
/ 11 марта 2020

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

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


var options = {
    title: 'Test Graph',
        curveType: 'function',
        legend: { position: 'top' },
        width: 1300,
        height: 300
}

function drawCharts(){
    var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

        console.log('chart-container class: ' + $('#chart-container').prop('class'))
        var chart = new google.visualization.LineChart(document.getElementById('chart-container'));
        var chart_div = document.getElementById('chart-container')

        google.visualization.events.addListener(chart, 'ready', function () {
            chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
            //console.log(chart_div.innerHTML);
        });

        chart.draw(data, options);  
}

Если вы просто возьмете параметр "options" из функции draw.chart, вы получите указанную строку заголовка. С «опциями» он игнорирует это. Кажется, не существует способа указать тип данных через параметры hAxis. Я должен быть в состоянии сделать это И предоставить варианты.

1 Ответ

0 голосов
/ 11 марта 2020

параметры не влияют на тип данных столбцов таблицы данных.
тип данных оси x или hAxis,
определяется типом данных первого столбца таблицы данных.

здесь, тип данных для первого столбца не указан, только метка и идентификатор. 

{label: 'Year', id: 'year'}

когда тип не указан, arrayToDataTable назначает тип на основе предоставленных данных.
в этом случае значения являются строками, поэтому тип данных оси x будет строка. 

['2014', 1000, 400],
['2015', 1170, 460],
['2016', 660, 1120],

если вы хотите, чтобы ось x имела тип datetime,
, то вам необходимо указать фактические значения datetime в данных. 

[new Date(2014, 0), 1000, 400],
[new Date(2015, 0), 1170, 460],
[new Date(2016, 0), 660, 1120],

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var options = {
    title: 'Test Graph',
    curveType: 'function',
    legend: {position: 'top'},
    width: 1300,
    height: 300
  }

  var data = google.visualization.arrayToDataTable([
    [{label: 'Year', id: 'year'},
     {label: 'Sales', id: 'Sales', type: 'number'},
     {label: 'Expenses', id: 'Expenses', type: 'number'}],
    [new Date(2014, 0), 1000, 400],
    [new Date(2015, 0), 1170, 460],
    [new Date(2016, 0), 660, 1120],
    [new Date(2017, 0), 1030, 540]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart-container'));

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.getContainer().innerHTML = '<img src="' + chart.getImageURI() + '">';
  });

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