Данные линейного графика Google на ежедневной основе с ежемесячными метками - PullRequest
Новая
       35

Данные линейного графика Google на ежедневной основе с ежемесячными метками

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

У меня есть анимированный график с 3 линиями.

Fiddle:

https://jsfiddle.net/t5rxamd7/

Я отображаю данные ежемесячно, например, De c, Jan 2020 et c. Как я могу отобразить несколько значений для каждого месяца. В настоящее время мой объект выглядит так: 

var chart_object = {"Dec 19": {monthLabel: "Dec", date: "30-Dec-2019", total: "42", cats: "0", dogs: "55", catspercentage: "0", dogsspercentage: "131"}, "Jan 20": {monthLabel: "Jan 2020", date: "", total: "", cats: "", dogs: ""}, "Feb 20": {monthLabel: "Feb", date: "", total: "", cats: "", dogs: ""}, "Mar 20": {monthLabel: "Mar", date: "", total: "", cats: "", dogs: ""}};

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

Как я могу это сделать? Может ли кто-нибудь помочь мне сделать это?

Заранее спасибо.

1 Ответ

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

сначала, нужен только пакет -> 'corechart' - 'bar' & 'line' для рисования материал диаграммы

изменить столбец оси X на тип даты .. . 

var chartData = new google.visualization.DataTable();
chartData.addColumn('date', 'Date');  <-- change to date

добавить hAxis параметр format: 'MMM yy'
удалить hAxis параметры для minValue & viewWindow
, если вы хотите заменить, они должны быть датами, не цифры (0) 

hAxis: {
  format: 'MMM yy',  // <-- add
  //minValue: 0,  // <-- remove
  viewWindowMode: "explicit",
  //viewWindow: { min: 0 }, // <-- remove

используйте new Date(date) для первого значения в строке данных, здесь ... 

rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);

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

, здесь мы используем getColumnRange, чтобы определить, сколько ticks добавить 

  // build x-axis ticks to prevent repeated labels
  var dateRange = chartData.getColumnRange(0);
  var ticks = [];
  var dateTick = dateRange.min;
  while (dateTick.getTime() <= dateRange.max.getTime()) {
    ticks.push(dateTick);
    dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 2, 0);
  }
  options.hAxis.ticks = ticks;

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

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

function prepareChartData(){
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('date', 'Date');
  chartData.addColumn('number', 'Total');
  chartData.addColumn('number', 'Dogs');
  chartData.addColumn('number', 'Cats');
  title = 'My Chart';

  var options = {
    title: title,
    curveType: 'function',
    legend: {position: 'bottom', alignment: 'start'},
    colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],

    annotations: {
      alwaysOutside: true,
      textStyle: {
        color: 'black',
        fontSize: 11
      },
    },
    hAxis: {
      format: 'MMM yy',
      viewWindowMode: "explicit",
    },
    vAxis: {
      minValue: 0,
      viewWindowMode: "explicit",
      viewWindow: { min: 0 },
      title: ''
    },
    titleTextStyle: {
      color:'#3a3a3a',
      fontSize:24,
      bold:false
      // fontName: "Segoe UI"
      },
    bar: {groupWidth: '95%'},
    bars: 'horizontal'
  };

  var chartDivId = "chart_div";
  var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
  var rawData =[];

  var chart_object = {"Dec 19": {monthLabel: "Dec", date: "30-Dec-2019", total: "42", cats: "0", dogs: "55", catspercentage: "0", dogsspercentage: "131"}, "Jan 20": {monthLabel: "Jan 2020", date: "31-Jan-2020", total: "0", cats: "0", dogs: "0"}, "Feb 20": {monthLabel: "Feb", date: "29-Feb-2020", total: "0", cats: "0", dogs: "0"}, "Mar 20": {monthLabel: "Mar", date: "31-Mar-2020", total: "0", cats: "0", dogs: "0"}};
  $.each(chart_object, function(i, chartobject) {
    date = chartobject.date;
    total = parseInt(chartobject.total);
    catscount = parseInt(chartobject.cats);
    dogscount = parseInt(chartobject.dogs);
    catspercentage = parseInt(chartobject.catspercentage);
    catspercentageAnnotation = catscount+",  percent "+catspercentage+"%";
    dogsspercentage = parseInt(chartobject.dogsspercentage);
    dogsspercentageAnnotation = dogscount+",  percent "+dogsspercentage+"%";

    rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);
  });

  var counter = 0;
  drawChart();

  function drawChart() {
    if(counter < rawData.length){
      chartData.addRow(rawData[counter]);

      // build x-axis ticks to prevent repeated labels
      var dateRange = chartData.getColumnRange(0);
      var ticks = [];
      var dateTick = dateRange.min;
      while (dateTick.getTime() <= dateRange.max.getTime()) {
        ticks.push(dateTick);
        dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 2, 0);
      }
      options.hAxis.ticks = ticks;

      chart.draw(chartData, options);
      counter++;
      window.setTimeout(drawChart, 1000);
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...