【问题标题】:Google Area charts with Min Value Less Than Zero最小值小于零的谷歌面积图
【发布时间】:2014-03-29 19:04:06
【问题描述】:

如何让 Google 图表显示以最小值而不是零为原点的面积图?

在本例中,我希望蓝色区域从 -2000 开始。

这是小提琴..http://jsfiddle.net/C87eD/

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month',   'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda'],
    ['2004/05',    165,      938,         522,             998,           450],
    ['2005/06',    135,      1120,        599,             1268,          288],
    ['2006/07',    157,      1167,        587,             807,           397],
    ['2007/08',    139,      1110,        615,             968,           215],
    ['2008/09',    136,      691,         629,             1026,          366]
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Monthly Coffee Production by Country',
    isStacked: true,
    width: 600,
    height: 400,
    vAxis: {
      title: "Cups",
      viewWindowMode:'explicit',
      viewWindow: {
        min: -2000
      }
    },
    hAxis: {title: "Month"}
  });
}

【问题讨论】:

    标签: google-visualization stacked-area-chart


    【解决方案1】:

    一种可能性是使用两个值为 -2000 和 2000 的虚拟列将第一个有用的值推为 0:

      var data = google.visualization.arrayToDataTable([
        ['Month',   'dummy1', 'dummy2', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda'],
        ['2004/05',    -2000, 2000, 165,      938,         522,             998,           450],
        ['2005/06',    -2000, 2000, 135,      1120,        599,             1268,          288],
        ['2006/07',    -2000, 2000, 157,      1167,        587,             807,           397],
        ['2007/08',    -2000, 2000, 139,      1110,        615,             968,           215],
        ['2008/09',    -2000, 2000, 136,      691,         629,             1026,          366]
      ]);
    

    并添加从图例中删除虚拟系列的选项:

    series: {
        0: {
            visibleInLegend: false
        },
        1: {
            visibleInLegend: false
        }
    }
    

    example at jsfiddle

    【讨论】:

    • 我认为您不需要第二个虚拟系列,您可以在系列中设置一些额外的选项来清理输出:jsfiddle.net/asgallant/Y2A47
    • @asgallant:这就像我尝试的第一个解决方案。不知何故,我觉得这是不对的:所有的价值观都被压低了。因此,我放入第二个虚拟系列具有类似于原始图表。谢谢:-)
    猜你喜欢
    • 1970-01-01
    • 2016-01-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-09
    • 1970-01-01
    • 2017-06-20
    • 1970-01-01
    相关资源
    最近更新 更多