Question

这是我的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选项，则显示的图片完全错误 enter image description here

如果我禁用它，图表就可以了 enter image description here

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

Answer 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>

Answer 2

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

＆＃13;

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);
    }

＆＃13;

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"></div>

＆＃13;

Answer 3

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

这很好，因为

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

2）当没有选项在新的Google图表中执行“子弹图表”时，您可以使用它来制作子弹图表，甚至在“最新版本的Firefox”中无法使用称为“条形图和列”的普通差异图表（我尝试了第39版）。

这里很棒example：

点击此处了解有关Google图表的更多信息：

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

谷歌图表堆叠不起作用

3 个答案: