将hAxis格式化为最新格式-Google图表 [英] Format hAxis to date - Google Chart

问题描述

我有以下代码和json文件.我想将hAxis更改为最新版本，但是似乎没有任何效果.我在数据选项中尝试了 format:'MMM-dd'，但是它不起作用.关于Im解析的json结构吗?

Google图表中有一些使用 new Date(Y，m，d)的数组结构.我必须使用那个吗?还是有一种方法可以使我的脚本适应日期格式?谢谢！

JSON文件:

  {"RAIL3":{"2021-02-12":"20.18"，"2021-02-11":"19.81"，"2021-02-10":"20.13"，"2021-02-09":"20.85"，"2021-02-08":"21.35"，"2021-02-05":"21.35"，"2021-02-04":"21.50"，"2021-02-03":"21.70"，"2021-02-02":"20.77"，"2021-02-01":"21.10"，"2021-01-29":"20.30"，"2021-01-28":"20.92"，" 2021-01-27":"20.74"，"2021-01-26":"20.67"，"2021-01-22":"20.85"，"2021-01-21":"20.89"，"2021-01-20":"21.03"，"2021-01-19":"21.10"，"2021-01-18":"20.92"，"2021-01-15":"21.21"，"2021-01-14":"20.74"；}，"ABEV3":{"2021-02-12":"14.79"，"2021-02-11":"14.95"，"2021-02-10":"15.01"，" 2021-02-09":" 14.96" ;，" 2021-02-08":" 14.94" ;，" 2021-02-05":" 15.52" ;，"2021-02-04":"15.60"，" 2021-02-03":" 15.68" ;，" 2021-02-02":" 15.61" ;，"2021-02-01":"15.60"，" 2021-01-29":"15.11"，"2021-01-28":"15.54"，"2021-01-27":"15.39"，"2021-01-26":"15.40"，"2021-01-22":"15.15"，"2021-01-21":"15.61"，"2021-01-20":"16.02"，"2021-01-19":"16.27"，"2021-01-18":"16.22"，"2021-01-15":"15.95"，"2021-01-14":"16.26"；}，"BBAS3":{"2021-02-12":"33.75"，"2021-02-11":"33.94"，"2021-02-10":"33.81"，"2021-02-09":"34.28"，" 2021-02-08":" 33.87" ;，"2021-02-05":"33.96"，"2021-02-04":"34.19"，"2021-02-03":"34.33"，" 2021-02-02":" 34.06" ;，"2021-02-01":"34.29"，"2021-01-29":"33.86"，"2021-01-28":"34.54"，"2021-01-27":"33.59"，"2021-01-26":"32.79"，"2021-01-22":"33.69"，"2021-01-21":"34.18"，"2021-01-20":"34.53"，"2021-01-19":"35.32"，"2021-01-18":"35.93"，"2021-01-15":"36.30"，"2021-01-14":"37.46"；}} 

HTML + JS文件:

 <！DOCTYPE html>< html>< head>< title> Google图表测试</title>< script src =" https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"</script>< script type ="文本/javascript"src =" https://www.gstatic.com/charts/loader.js"</script>< script type =文本/javascript">google.charts.load('current'，{'packages':['corechart']}));google.charts.setOnLoadCallback(drawChart);函数drawChart(){var jsonData = $ .ajax({网址:"json_file.json"，dataType:"json"，异步:假}).responseJSON;var key ="ABEV3"；var ar = Object.entries(jsonData [key]).map(([[a，b])=> [[(a)，Number(b)]);;var data = new google.visualization.DataTable();var options = {传说:无"，颜色:['#00FF00']，smoothLine:正确，宽度:400，高度:400，'chartArea':{'背景颜色': {'fill':'透明的}}，vAxis:{基线Color:'透明'，网格线: {颜色:#f3f3f3"，}}，hAxis:{格式:"dd/MM/yy"}，};data.addColumn('string'，'date');data.addColumn('number'，'value');data.addRows(ar);data.sort([{column:0}]);var container = document.getElementById('chart_div')var chart = new google.visualization.AreaChart(container);chart.draw(数据，选项);}</script></head><身体>< div id ="chart_div";style =" width:100％;高度:100％"/div</body></html> 

解决方案

为使格式化程序正常工作，您需要确保日期值为Date对象，列类型为"date".

示例: https://codepen.io/alexpetergill/pen/c4d97e495fe4ce259dadc9ccb0451c03

目前，您正在使用字符串".

查看此行:

  var ar = Object.entries(jsonData [key]).map(([[a，b])=> [new Date(a)，Number(b)]); 

还请参见此行:

  data.addColumn('date'，'date'); 

I have the following code and json file. I'd like to change the hAxis to date, but nothing seems to work. I've tried format:'MMM-dd' in data options, but it doesn't work. Is it something about the json structure that Im parsing?

There are some array structure in Google Chart using new Date(Y, m, d). Do I have to use that? Or is there a way to adapt my script to date format? Thanks!

JSON file:

{
    "RAIL3": {
        "2021-02-12": "20.18",
        "2021-02-11": "19.81",
        "2021-02-10": "20.13",
        "2021-02-09": "20.85",
        "2021-02-08": "21.35",
        "2021-02-05": "21.35",
        "2021-02-04": "21.50",
        "2021-02-03": "21.70",
        "2021-02-02": "20.77",
        "2021-02-01": "21.10",
        "2021-01-29": "20.30",
        "2021-01-28": "20.92",
        "2021-01-27": "20.74",
        "2021-01-26": "20.67",
        "2021-01-22": "20.85",
        "2021-01-21": "20.89",
        "2021-01-20": "21.03",
        "2021-01-19": "21.10",
        "2021-01-18": "20.92",
        "2021-01-15": "21.21",
        "2021-01-14": "20.74"
    },
    "ABEV3": {
        "2021-02-12": "14.79",
        "2021-02-11": "14.95",
        "2021-02-10": "15.01",
        "2021-02-09": "14.96",
        "2021-02-08": "14.94",
        "2021-02-05": "15.52",
        "2021-02-04": "15.60",
        "2021-02-03": "15.68",
        "2021-02-02": "15.61",
        "2021-02-01": "15.60",
        "2021-01-29": "15.11",
        "2021-01-28": "15.54",
        "2021-01-27": "15.39",
        "2021-01-26": "15.40",
        "2021-01-22": "15.15",
        "2021-01-21": "15.61",
        "2021-01-20": "16.02",
        "2021-01-19": "16.27",
        "2021-01-18": "16.22",
        "2021-01-15": "15.95",
        "2021-01-14": "16.26"
    },
    "BBAS3": {
        "2021-02-12": "33.75",
        "2021-02-11": "33.94",
        "2021-02-10": "33.81",
        "2021-02-09": "34.28",
        "2021-02-08": "33.87",
        "2021-02-05": "33.96",
        "2021-02-04": "34.19",
        "2021-02-03": "34.33",
        "2021-02-02": "34.06",
        "2021-02-01": "34.29",
        "2021-01-29": "33.86",
        "2021-01-28": "34.54",
        "2021-01-27": "33.59",
        "2021-01-26": "32.79",
        "2021-01-22": "33.69",
        "2021-01-21": "34.18",
        "2021-01-20": "34.53",
        "2021-01-19": "35.32",
        "2021-01-18": "35.93",
        "2021-01-15": "36.30",
        "2021-01-14": "37.46"
    }
}

Html+JS file:

<!DOCTYPE html>
<html>
<head>

  <title>Google Chart test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    
    
    google.charts.load('current', {'packages':['corechart']});
      
    
    google.charts.setOnLoadCallback(drawChart);
      

    
    function drawChart() {
      var jsonData = $.ajax({
        url: "json_file.json",
        dataType: "json",
        async: false
      }).responseJSON;
      
      var key = "ABEV3";
      var ar = Object.entries(jsonData[key]).map(([a, b]) => [(a), Number(b)]);
      var data = new google.visualization.DataTable();
      
      var options = {
               
        legend: 'none',
        colors: ['#00FF00'],       
        smoothLine: true,
               width: 400, 
               height: 400,
               'chartArea': {
                    'backgroundColor': {
                        'fill': 'transparent'  
                    }
                },
                vAxis: {
                    baselineColor: 'transparent',  
                    gridlines: {
                        color: '#f3f3f3',
                    }
                },
                hAxis: {
                  format: 'dd/MM/yy'
                },
                
     };
      data.addColumn('string', 'date');
      data.addColumn('number', 'value');

      data.addRows(ar);
      data.sort([{column: 0}]);
      
      var container =  document.getElementById('chart_div')
      var chart = new google.visualization.AreaChart(container);

      chart.draw(data, options);
}
    </script>
</head>
<body>

        <div id="chart_div" style="width: 100%; height: 100%"></div>

</body>
</html>

解决方案

For the formatter to work you need to ensure your date values are Date objects and the column type is "date".

Example: https://codepen.io/alexpetergill/pen/c4d97e495fe4ce259dadc9ccb0451c03

At the moment, you are using "strings".

See this line:

var ar = Object.entries(jsonData[key]).map(([a, b]) => [new Date(a), Number(b)]);

And also see this line:

data.addColumn('date', 'date');

这篇关于将hAxis格式化为最新格式-Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！