代码之家 › 专栏 › 技术社区 › Joozty

谷歌图表-缺失列和重复X轴标签

google-visualization charts javascript

Joozty · 技术社区 · 8 年前

我试图创建列图表,但我有一个问题,失踪栏2009年和重复X轴标签。

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
            [
            {label: "year", type: "number", format: "none"},
            {label: "performance 1", type: "number", format: "none"},
          {label: "performance 2", type: "number", format: "none"},
        ],
        ["2008", 4, 7],
        ["2009", 10, 12],
        ["2010", 15, 18],
        ["2011", 3, 20],
        ["2012", 5, 4]
    ]);

    var options = {
      title:"Testing chart - column",
      hAxis:{
        format:"####",
        title:"",
        viewWindow:{
          min:"2009"
        },
        showTextEvery:"1"
      },
      vAxis:{
        title:""
      },
        colors: ["#805e59","#e6d2cf"]
   };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

JSFiddle可以在这里找到:

https://jsfiddle.net/8rdc4u1L/9/

1 回复 | 直到 8 年前

WhiteHat 8 年前

问题在于使用--> type: "number" ——X轴

在我的经验中,柱形图/条形图与--> type: "string"

不管怎样,这实际上是您提供的--> ["2008", 4, 7],

请参阅以下工作段。。。

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [{
      label: "year",
      type: "string",
      format: "none"
    },
     {
       label: "performance 1",
       type: "number",
       format: "none"
     },
     {
       label: "performance 2",
       type: "number",
       format: "none"
     },
    ],
    ["2008", 4, 7],
    ["2009", 10, 12],
    ["2010", 15, 18],
    ["2011", 3, 20],
    ["2012", 5, 4]
  ]);

  var options = {
    title: "Testing chart - column",
    colors: ["#805e59", "#e6d2cf"]
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

注意:这也可以避免其他问题的工具提示问题。。。

编辑

如果你想使用X轴的数字,
建议使用 ticks 用于控制显示哪些标签的选项。。。

ticks: [2009, 2010, 2011, 2012]

填补 蜱虫 动态使用数据表/视图方法--> getDistinctValues

请参阅以下工作段。。。

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [{
        label: "year",
        type: "number",
        format: "none"
      },
      {
        label: "performance 1",
        type: "number",
        format: "none"
      },
      {
        label: "performance 2",
        type: "number",
        format: "none"
      },
    ],
    ["2008", 4, 7],
    ["2009", 10, 12],
    ["2010", 15, 18],
    ["2011", 3, 20],
    ["2012", 5, 4]
  ]);

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([{
    column: 0,
    test: function (value) {
      return (value > 2008);
    }
  }]));

  var options = {
    title: "Testing chart - column",
    hAxis: {
      ticks: view.getDistinctValues(0),
      format: "####",
      title: "",
      showTextEvery: "1"
    },
    vAxis: {
      title: ""
    },
    colors: ["#805e59", "#e6d2cf"]
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

<script src=“https://www.gstatic.com/charts/loader.js”></脚本>
<div id=“chart_div”></div>