Блог

У меня есть эта диаграмма Google, и я не могу получить нижнюю часть (где указаны дата и время), чтобы показывать часы с 00 до 23, она всегда показывает ее с AM / PM. Я имею в виду область, которая всегда видна, другое значение, которое отображается во всплывающей подсказке, было отформатировано нормально, но не в этой нижней части. Что я делаю не так?

Я попытался с помощью этого dateformatter кода (кажется, это влияет только на значение даты всплывающей подсказки). И этим (ничего не делая):

 hAxis: {
    format: 'dd/MM/yyyy HH:mm',
    gridlines: {count: 15}
},
  

jsfiddle

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

    function drawChart() {

      var chartDiv = document.getElementById('chart_div');

      var data = new google.visualization.DataTable();
      data.addColumn('datetime');
      data.addColumn('number', "Temp");
      data.addColumn('number', "Humidity");

      data.addRows([

                     
             [new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
                
             [new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
                                                     
             [new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
             
             [new Date(2020, 11, 04, 15, 30), 25.60, 62.38],
             
             [new Date(2020, 11, 04, 15, 40), 25.62, 62.16],
             
             [new Date(2020, 11, 04, 15, 50), 25.60, 62.00],
             
             [new Date(2020, 11, 04, 16, 00), 25.60, 61.79],
                                                     
             [new Date(2020, 11, 04, 16, 10), 25.77, 61.72],
             
             [new Date(2020, 11, 04, 16, 20), 25.97, 60.93],
             
             [new Date(2020, 11, 04, 16, 30), 26.07, 60.38],
        
      ]);

        // give date a certain format
        var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
        dateFormatter.format(data, 0);

      var materialOptions = {
    
        // trying to format date/time on lower line, not working :/
        hAxis: {
            format: 'dd/MM/yyyy HH:mm',
            gridlines: {count: 15}
        },
        

        legend: {position: 'none'},
        
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temp'},
          1: {axis: 'Humidity'},
        },
        axes: {
          y: {
            Temp: {label: 'Temps (Celsius)', range: {max: 15, min: 40 }},
            Humidity: {label: 'Humidity (%)', /*range: {max: 30, min: 90 }*/},
          },
          
        },
        colors: ['#B00000', '#1bdec4']
      };

      function drawMaterialChart() {
        var materialChart = new google.charts.Line(chartDiv);
        materialChart.draw(data, materialOptions);
      }

      drawMaterialChart();

    }
</script>
  

при рисовании диаграммы материала
необходимо преобразовать параметры с помощью статического метода —> google.charts.Line.convertOptions

 materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
  

это обеспечит правильное включение поддерживаемых параметров,
см. Следующий рабочий фрагмент…

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

function drawChart() {

  var chartDiv = document.getElementById('chart_div');

  var data = new google.visualization.DataTable();
  data.addColumn('datetime');
  data.addColumn('number', "Temp");
  data.addColumn('number', "Humidity");


  data.addRows([




    [new Date(2020, 11, 04, 15, 00), 25.50, 62.76],


    [new Date(2020, 11, 04, 15, 10), 25.58, 62.63],


    [new Date(2020, 11, 04, 15, 20), 25.60, 62.47],



  ]);

  // give date a certain format
  var dateFormatter = new google.visualization.DateFormat({
    pattern: 'dd/MM/yyyy HH:mm'
  });
  dateFormatter.format(data, 0);

  var materialOptions = {

    // trying to format date/time on lower line, not working :/
    hAxis: {
      format: 'dd/MM/yyyy HH:mm',
      gridlines: {
        count: 15
      }
    },


    legend: {
      position: 'none'
    },

    series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {
        axis: 'Temp'
      },
      1: {
        axis: 'Humidity'
      },
    },
    axes: {
      y: {
        Temp: {
          label: 'Temps (Celsius)',
          range: {
            max: 15,
            min: 40
          }
        },
        Humidity: {
          label: 'Humidity (%)',
          range: {max: 30, min: 90 }
        },
      },

    },
    colors: ['#B00000', '#1bdec4']
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
  }

  drawMaterialChart();

}  

  
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    
  </head>
  <body>
  
    <div id="chart_div" style="width: 100%; height: 500px;"></div>

</body>
</html>  

примечание: существует несколько параметров, которые не поддерживаются диаграммами материалов,
см. Проблему отслеживания четности элементов диаграммы материалов