无法从 Google 图表日期中删除 AM PM 格式

Question

我有这个 Google 图表，但我无法让下半部分（日期和时间所在的位置）显示从 00 到 23 的小时数，它总是显示 AM/PM。我的意思是始终可见的区域，工具提示上显示的其他值已格式化，但不是下半部分。我做错了什么？

我试过 dateformatter 代码（它似乎只影响工具提示日期值）。通过这个（什么都不做）：

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

The 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>

Answer 1

绘制 material 图表时，
需要使用静态方法转换选项 --> 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>

注意：material 图表不支持多个选项，
参见 Tracking Issue for Material Chart Feature Parity

无法从 Google 图表日期中删除 AM PM 格式

Cannot remove AM PM format from Google Chart date

javascript

charts

google-visualization

bar-chart