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

もう 1 つのオプションは、Google Image Charts を使用することです。

そしてそれは良いので

1) 画像なので、古いものを含むすべてのブラウザで動作します。

2) 新しい Google Charts で「Bullet Charts」を実行するオプションがなく、最新バージョンの Firefox では「Bar and Column」スタイルの単純な Diff Charts でさえ機能しない場合に、Bullet Charts を実行できます (試してみましたバージョン 39)。

ここに素晴らしい例があります：

ここに画像の説明を入力

Google イメージ チャートの詳細については、こちらをご覧ください。

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

于 2015-08-07T00:02:27.450 に答える