文章/答案/技术大牛

发布

社区首页 >问答首页 >hAxis中的Google图表月份标签不正确

问hAxis中的Google图表月份标签不正确
EN

Stack Overflow用户

提问于 2020-03-18 09:16:35

回答 1查看 406关注 0票数 2

我有一张3行的动画线条图。

小提琴：

https://jsfiddle.net/8b3czfuq/

我是显示每日明智的数据在一个线图表与月-年标签在h轴。

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

function prepareChartData(){
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('date', 'Date');
  chartData.addColumn('number', 'Total');
  chartData.addColumn('number', 'Dogs');
  chartData.addColumn('number', 'Cats');
  title = 'My Chart';

  var options = {
    title: title,
    curveType: 'function',
    legend: {position: 'bottom', alignment: 'start'},
    colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],

    annotations: {
      alwaysOutside: true,
      textStyle: {
        color: 'black',
        fontSize: 11
      },
    },
    hAxis: {
      format: 'MMM yy',
      viewWindowMode: "explicit",
    },
    vAxis: {
      minValue: 0,
      viewWindowMode: "explicit",
      viewWindow: { min: 0 },
      title: ''
    },
    titleTextStyle: {
      color:'#3a3a3a',
      fontSize:24,
      bold:false
      // fontName: "Segoe UI"
      },
    bar: {groupWidth: '95%'},
    bars: 'horizontal'
  };

  var chartDivId = "chart_div";
  var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
  var rawData =[];

   var chart_object = { "Feb 20": {monthLabel: "Feb", chartArray:[{'date': "2020-2-12", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-2-13", 'total': "15", 'cats': "20", 'dogs': "20"}]}, "Mar 20": {monthLabel: "Mar", chartArray:[{'date': "2020-3-10", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-03-11", 'total': "15", 'cats': "30", 'dogs': "30"}]}};

  $.each(chart_object, function(i, chartobject) {
 	$.each(  chartobject.chartArray, function( chartIndex , chartValue ){

    date = chartValue['date'];
    total = parseInt(chartValue['total']);
    catscount = parseInt(chartValue['cats']);
    dogscount = parseInt(chartValue['dogs']);
    catspercentage = 0;
    catspercentageAnnotation = catscount+",  percent "+catspercentage+"%";
    dogsspercentage = 0;
    dogsspercentageAnnotation = dogscount+",  percent "+dogsspercentage+"%";

    rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);
	  });
  });

  var counter = 0;
  drawChart();

  function drawChart() {
    if(counter < rawData.length){
      chartData.addRow(rawData[counter]);

      // build x-axis ticks to prevent repeated labels
      var dateRange = chartData.getColumnRange(0);
      var ticks = [];
      var dateTick = dateRange.min;
      while (dateTick.getTime() <= dateRange.max.getTime()) {
        ticks.push(dateTick);
        dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 2, 0);
      }
      options.hAxis.ticks = ticks;

      chart.draw(chartData, options);
      counter++;
      window.setTimeout(drawChart, 1000);
    }
  }
}

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript" ></script>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <div id="chart_div"></div>

我对这张图表有一些问题。

我有二月和三月的数据。但是只有Feb标签出现在hAxis标签中。预期的结果是，它应该显示与对象中的日期相对应的所有月份标签。

，

，haxis月份标签从左开始，最后一个月从最右边开始。我想在图表中显示那个月的数据开始的标签。(假设我有到四月的数据，在haxis中，4月标签显示在右边，即使线图中的4月数据开始于标签位置。
对于haxis中的第一个标签，我也想显示日期。)在这种情况下，2020-2-12是最小的数据。因此，在haxis中，应该显示2月12日、20日和所有其他标签只应该是MMM yy。

。

有人能帮我做上面的3次修复吗？

提前谢谢。

javascript

charts

google-visualization

linechart

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-18 14:36:38

若要在月初显示日期标签，

需要用这个月的第一天..。

dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);  // first day

当前代码使用月份的最后一天(根据来自另一个问题的数据)。

dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 2, 0);  // last day

接下来，为了以不同的格式显示第一次约会，

我们可以用对象表示法({})来表示滴答，

其中，v:是滴答的值，f:是格式化的值。

在这里，我们使用日期格式化程序来更改第一个滴答的格式。

  // build x-axis ticks to prevent repeated labels
  var dateFormat = new google.visualization.DateFormat({
    pattern: 'yyyy-MM-dd'
  });
  var dateRange = chartData.getColumnRange(0);
  var ticks = [];
  var dateTick = dateRange.min;
  while (dateTick.getTime() <= dateRange.max.getTime()) {
    if (ticks.length === 0) {
      // format first tick
      ticks.push({
        v: dateTick,
        f: dateFormat.formatValue(dateTick)
      });
    } else {
      ticks.push(dateTick);
    }
    dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);
  }

看下面的工作片段..。

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

function prepareChartData(){
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('date', 'Date');
  chartData.addColumn('number', 'Total');
  chartData.addColumn('number', 'Dogs');
  chartData.addColumn('number', 'Cats');
  title = 'My Chart';

  var options = {
    title: title,
    curveType: 'function',
    legend: {position: 'bottom', alignment: 'start'},
    colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],

    annotations: {
      alwaysOutside: true,
      textStyle: {
        color: 'black',
        fontSize: 11
      },
    },
    hAxis: {
      format: 'MMM yy',
      viewWindowMode: "explicit",
    },
    vAxis: {
      minValue: 0,
      viewWindowMode: "explicit",
      viewWindow: { min: 0 },
      title: ''
    },
    titleTextStyle: {
      color:'#3a3a3a',
      fontSize:24,
      bold:false
      // fontName: "Segoe UI"
      },
    bar: {groupWidth: '95%'},
    bars: 'horizontal'
  };

  var chartDivId = "chart_div";
  var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
  var rawData =[];

   var chart_object = { "Feb 20": {monthLabel: "Feb", chartArray:[{'date': "2020-2-12", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-2-13", 'total': "15", 'cats': "20", 'dogs': "20"}]}, "Mar 20": {monthLabel: "Mar", chartArray:[{'date': "2020-3-10", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-03-11", 'total': "15", 'cats': "30", 'dogs': "30"}]}};

  $.each(chart_object, function(i, chartobject) {
 	$.each(  chartobject.chartArray, function( chartIndex , chartValue ){

    date = chartValue['date'];
    total = parseInt(chartValue['total']);
    catscount = parseInt(chartValue['cats']);
    dogscount = parseInt(chartValue['dogs']);
    catspercentage = 0;
    catspercentageAnnotation = catscount+",  percent "+catspercentage+"%";
    dogsspercentage = 0;
    dogsspercentageAnnotation = dogscount+",  percent "+dogsspercentage+"%";

    rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);
	  });
  });

  var counter = 0;
  drawChart();

  function drawChart() {
    if(counter < rawData.length){
      chartData.addRow(rawData[counter]);

      // build x-axis ticks to prevent repeated labels
      var dateFormat = new google.visualization.DateFormat({
        pattern: 'yyyy-MM-dd'
      });
      var dateRange = chartData.getColumnRange(0);
      var ticks = [];
      var dateTick = dateRange.min;
      while (dateTick.getTime() <= dateRange.max.getTime()) {
        if (ticks.length === 0) {
          // format first tick
          ticks.push({
            v: dateTick,
            f: dateFormat.formatValue(dateTick)
          });
        } else {
          ticks.push(dateTick);
        }
        dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);
      }
      options.hAxis.ticks = ticks;

      chart.draw(chartData, options);
      counter++;
      window.setTimeout(drawChart, 1000);
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript" ></script>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <div id="chart_div"></div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60736484

复制

相似问题

问hAxis中的Google图表月份标签不正确
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问hAxis中的Google图表月份标签不正确EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问hAxis中的Google图表月份标签不正确
EN