Google Материальные таблицы группируются по месяцам по xAxis и формату даты - PullRequest
0 голосов
/ 31 декабря 2018

enter image description here

Я хочу сгруппировать данные по месяцам и отобразить их вместе.

В настоящее время xAxis показывает месяц и день, но я хочу показать только месяц,Значения одного и того же месяца должны быть вместе

Таким образом, правильное решение должно быть 2 месяца.Ноябрь и декабрь, где декабрь имеет 2 столбца (синий и правый красный)

Важно знать, что я хочу использовать таблицы материалов

https://jsfiddle.net/woe978u5/

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" ></div>

JS

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


    function drawTitleSubtitle() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Month');
        data.addColumn('number', 'Buys');
        data.addColumn('number', 'Sells');

        data.addRows([
                [new Date(2018, 11, 1), 18636 , null],
                [new Date(2018, 10, 1), null, 20764],
                [new Date(2018, 11, 1), null, 63725]
        ]);

        var options = {
          chart: {
            title: 'Shares traded by insiders ( People who have at least 10% of the company)',
          },
          axes: {
            x: {
                format: 'MMM d, y',
                label: 'test'
            },
            y: {
                distance: {label: 'parsecs'}, // Left y-axis.
                brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
              }
          },
        };

        var materialChart = new google.charts.Bar(document.getElementById('chart_div'));
        materialChart.draw(data, options);
      }

1 Ответ

0 голосов
/ 31 декабря 2018

Возможно, используется более старый API Google Charts, но используется тема материала.

var options = {
            hAxis: {
              format: 'MM yyyy'
            },
            theme: 'material',
            vAxis: {
              title: 'Amount'
            }
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
...