Показать название месяца по вертикали X на диаграмме Google - PullRequest
Новая
       89

Показать название месяца по вертикали X на диаграмме Google

0 голосов
/ 14 июля 2020

Цель: Показывать название месяца вертикальной линией X на линейной диаграмме Google.

Проблема: Как вы можете отображать название месяца вместо использования номера месяца в вертикальной строке X?

Jsfiddle: https://jsfiddle.net/6fckmsdL/18/

Спасибо! 

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

    function drawChart() {

      var button = document.getElementById('change-chart');
      var chartDiv = document.getElementById('chart_div');

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Month');
      data.addColumn('number', "2017-Average Temperature");
      data.addColumn('number', "2018-Average Hours of Daylight");
        data.addColumn({type: 'string', role: 'tooltip'});

      data.addRows([
        [1,  -.5,  5.7, 'January'],
        [2,   .4,  8.7, 'January'],
        [3,   .5,   12, 'January'],
        [4,  2.9, 15.3, 'January'],
        [5,  6.3, 18.6, 'January']

      ]);

      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };


      function drawMaterialChart() {
        var materialChart = new google.charts.Line(chartDiv);
        materialChart.draw(data, materialOptions);
        button.innerText = 'Change to Classic';
        button.onclick = drawClassicChart;
      }

      drawMaterialChart();

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

1 Ответ

0 голосов
/ 14 июля 2020

Как обсуждалось в разделе комментариев, попробуйте добавить названия месяцев в качестве первого индекса в массиве data.addRows и установите type первого data.addColumn на string вместо месяца. Позвольте мне показать вам, как это сделать. 

var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('number', "2017-Average Temperature");
  data.addColumn('number', "2018-Average Hours of Daylight");
    data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    ['January',  -.5,  5.7, 'January'],
    ['Feburary',   .4,  8.7, 'January'],
    ['March',   .5,   12, 'January'],
    ['April',  2.9, 15.3, 'January'],
    ['May',  6.3, 18.6, 'January']

  ]);

Вы можете просмотреть это и здесь .

Вы можете добавить оставшиеся месяцы, если хотите, аналогичным образом.

Спасибо

...