Cusomizing гексис метка в гугл чартах - PullRequest
Новая
       10

Cusomizing гексис метка в гугл чартах

0 голосов
/ 23 января 2019

У меня есть следующая функция для рисования графика, который представляет некоторое значение для данного времени. Горизонтальная ось должна быть датами, а не числами (которые важны для работы линии тренда). Как мне этого добиться?

chart_data содержит следующее 

[["Year","accept","error","total"],[{"v":0,"f":"20.09.2018"},1,3,4], 
[{"v":1,"f":"21.09.2018"},4,5,9],[{"v":2,"f":"22.09.2018"},0,7,7], 
[{"v":3,"f":"24.09.2018"},14,14,28],[{"v":4,"f":"25.09.2018"},2,2,4], 
[{"v":5,"f":"26.09.2018"},6,16,22]]

Функция js выглядит так: 

function drawChart(chart_id, chart_title, chart_data) {

        var data = google.visualization.arrayToDataTable(
            chart_data
        );


        var options = {
            title: chart_title,

            hAxis: {
                title: 'Datum',
                titleTextStyle: {color: '#333'}},
            vAxis: {minValue: 0},
            trendlines: {
                0: {
                    type: 'polynomial',
                    degree: 3,
                },
                1:{
                    type: 'polynomial',
                    degree: 3,
                },
                2:{
                    type: 'polynomial',
                    degree: 3,
                } }    // Draw a trendline for data series 0.
        };

        var chart = new google.visualization.AreaChart(document.getElementById(chart_id));
        chart.draw(data, options);
    }

1 Ответ

0 голосов
/ 23 января 2019

, чтобы настроить метки гексиса, используйте опцию hAxis.ticks

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

var chart_data = [
  ["Year","accept","error","total"],
  [{"v":0,"f":"20.09.2018"},1,3,4],
  [{"v":1,"f":"21.09.2018"},4,5,9],
  [{"v":2,"f":"22.09.2018"},0,7,7],
  [{"v":3,"f":"24.09.2018"},14,14,28],
  [{"v":4,"f":"25.09.2018"},2,2,4],
  [{"v":5,"f":"26.09.2018"},6,16,22]
];

// extract first value from each row
var ticks = chart_data.map(function (row) {
  return row[0];
});
ticks.splice(0, 1); // remove column label

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart_data = [
    ["Year","accept","error","total"],
    [{"v":0,"f":"20.09.2018"},1,3,4],
    [{"v":1,"f":"21.09.2018"},4,5,9],
    [{"v":2,"f":"22.09.2018"},0,7,7],
    [{"v":3,"f":"24.09.2018"},14,14,28],
    [{"v":4,"f":"25.09.2018"},2,2,4],
    [{"v":5,"f":"26.09.2018"},6,16,22]
  ];

  // extract first value from each row
  var ticks = chart_data.map(function (row) {
    return row[0];
  });
  ticks.splice(0, 1); // remove column label

  var data = google.visualization.arrayToDataTable(chart_data);

  var options = {
    title: 'chart_title',
    hAxis: {
      ticks: ticks,  // custom labels
      title: 'Datum',
      titleTextStyle: {color: '#333'}
    },
    vAxis: {minValue: 0},
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
      },
      1:{
        type: 'polynomial',
        degree: 3,
      },
      2:{
        type: 'polynomial',
        degree: 3,
      }
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...