0

这是我的 HTML

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var jsonDataObj = {
"rows":[
{"c":[{"v":"2001"},{"v":"43"},{"v":"43"}]},
{"c":[{"v":"2002"},{"v":"43"},{"v":"43"}]},
{"c":[{"v":"2003"},{"v":"43"},{"v":"43"}]},
{"c":[{"v":"2004"},{"v":"43"},{"v":"43"}]}
],
"cols":[
{"id":"","label":"Year","type":"string"},
{"id":"","label":"profits","type":"number"}, 
{"id":"","label":"expenses","type":"number"}
]
};
function drawChart() {
var jsonData = jsonDataObj;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 800, height: 480,
//isStacked:true,
title: 'Company Performance'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

如果我启用 isStacked 选项，则显示的图片完全错误 在此处输入图像描述

如果我禁用它，图表很好 在此处输入图像描述

让我知道如何让堆叠工作。

4

3 回答 3

1

经过一些测试，我找到了错误的原因：您在数据中定义了一个字符串而不是数字，固定页面如下：

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var jsonDataObj = {
"rows":[
{"c":[{"v":"2001"},{"v":65},{"v":40}]},
{"c":[{"v":"2002"},{"v":67},{"v":43}]},
{"c":[{"v":"2003"},{"v":80},{"v":35}]},
{"c":[{"v":"2004"},{"v":97},{"v":47}]}
],
"cols":[
{"id":"","label":"Year","type":"string"},
{"id":"","label":"profits","type":"number"}, 
{"id":"","label":"expenses","type":"number"}
]
};


function drawChart() {
var jsonData = jsonDataObj;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 800,
height: 480,
isStacked: true,
title: 'Company Performance'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
于 2012-11-06T08:25:19.113 回答
0

请看一下这个例子https://jsfiddle.net/912jggdw/

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawStacked);

function drawStacked() {
        var data = new google.visualization.arrayToDataTable([
          ["Category",    "A", "Total"    ],
          ["Planned",  500,        500       ],
          ["Achieved",  400,       600       ]
        ]);

      var options = {
        width: 300,
        height: 400,
        legend: {position: "none"},
        bar: { groupWidth: '75%' },
        isStacked: true,
      };


      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"></div>

于 2015-08-06T22:41:50.343 回答
0

另一种选择是使用 Google Image Charts。

这很好，因为

1) 它适用于所有浏览器，包括旧浏览器，因为它是一张图片。

2）你可以用它做子弹图，当没有选项在新的谷歌图表中做“子弹图”时，即使是样式为“条形图”的普通差异图在最新版本的 Firefox 中也不起作用（我试过第 39 版）。

这是一个很好的例子：

在此处输入图像描述

在此处阅读有关 Google 图片图表的更多信息：

https://developers.google.com/chart/image/?hl=en

于 2015-08-07T00:02:27.450 回答