Question

我正在开发angularjs谷歌排行榜。请找到演示here

我想显示在h轴和工具提示上显示的不同值。在下面的代码中，我想在工具提示上仅显示h轴上的月份名称以及月份和年份。有什么建议吗？

js code：

angular.module('myApp', ['googlechart'])
  .controller('myController', function($scope) {
    var chart1 = {};
    chart1.type = "ColumnChart";
     chart1.displayed = false;
    chart1.data = {
      "cols": [{
        id: "month",
        label: "Month", 
        type: "string"
      }, {
        id: "laptop-id",
        label: "Laptop",
        type: "number"
      } ],
      "rows": [{
        c: [{
          v: "January" + " 2017"
        }, {
          v: 19,

        } ]
      }, {
        c: [{
          v: "February" + " 2017"
        }, {
          v: 13
        }]
      }, {
        c: [{
            v: "March" + " 2017"
          }, {
            v: 24
          }

        ]
      }, {
        c: [{
            v: "April" + " 2017"
          }, {
            v: 24
          }
        ]
      }, {
        c: [{
            v: "May"+ " 2017"
          }, {
            v: 18
          } 
        ]
      }, {
        c: [{
            v: "June"+ " 2017"
          }, {
            v: 21
          } 
        ]
      }, {
        c: [{
            v: "July"+ " 2017"
          }, {
            v: 24
          } 

        ]
      }, {
        c: [{
            v: "August"+ " 2017"
          }, {
            v: 14
          } 
        ]
      }, {
        c: [{
            v: "September"+ " 2017"
          }, {
            v: 4
          } 
        ]
      }, {
        c: [{
            v: "October"+ " 2017"
          }, {
            v: 34
          } 
        ]
      }]
    };
    chart1.options = {
      "title": "Title goes here",
      "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
      "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
      "isStacked": "true",
      "fill": 20,
       focusTarget: 'category',
        "displayExactValues": true,
      "vAxis": {
        "title": "Sales unit",
        "gridlines": {
          "count": 10
        }
      },
      "hAxis": {
       slantedText : "true",
     },

    };
    $scope.myChart = chart1;

  });

在上面的代码中我使用v: "January" + " 2017"，我想只显示第一部分，即一月将在h轴和 2017年1月< / strong>当鼠标悬停在栏上时的工具提示（同样的事情，2月，3月......在h轴和工具提示上显示各个栏的完整文字）。

Answer 1

您可以使用实际日期作为列值

这将允许hAxis.format和hAxis.ticks作为轴标签

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
  "cols": [{
  id: "month",
  label: "Month",
  type: "date"
  }, {
  id: "laptop-id",
  label: "Laptop",
  type: "number"
  } ],
  "rows": [{
   c: [
    {
    v: new Date(2017, 0, 1),
    f: "January 2017"
    },
    {v: 119}
  ]
  }, {
    c: [
    {
    v: new Date(2017, 1, 1),
    f: "February 2017"
    },
    {v: 022}
    ]
  }, {
    c: [
    {
    v: new Date(2017, 2, 1),
    f: "March 2017"
    },
    {v: 033}
    ]
  }, {
    c: [
    {
    v: new Date(2017, 3, 1),
    f: "April 2017"
    },
    {v: 044}
    ]
  }, {
    c: [
    {
    v: new Date(2017, 4, 1),
    f: "May 2017"
    },
    {v: 055}
    ]
  }, {
    c: [
    {
    v: new Date(2017, 5, 1),
    f: "June 2017"
    },
    {v: 066}
    ]
  }, {
    c: [
    {
    v: new Date(2017, 6, 1),
    f: "July 2017"
    },
    {v: 077}
    ]
  }, {
    c: [
    {
    v: new Date(2017, 7, 1),
    f: "August 2017"
    },
    {v: 088}
    ]
  }, {
    c: [
    {
    v: new Date(2017, 8, 1),
    f: "September 2017"
    },
    {v: 099}
    ]
  }, {
    c: [
    {
    v: new Date(2017, 9, 1),
    f: "October 2017"
    },
    {v: 010}
    ]
  }]
  });

  options = {
    "title": "Title goes here",
    "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
    "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
    "isStacked": "true",
    "fill": 20,
    focusTarget: 'category',
    "displayExactValues": true,
    "vAxis": {
      "title": "Sales unit",
      "gridlines": {
        "count": 10
      }
    },
    "hAxis": {
      slantedText : "true",
      format: "MMM"
    }
  };

  options.hAxis.ticks = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    options.hAxis.ticks.push(data.getValue(i, 0));
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(data, options);
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

仅显示h轴上的部分文本

1 个答案: