0

我需要在单页上显示超过 1 个图表 - 这些图表应该是单独的，而不是在一个块中。我在这里找到了一些建议，但我不知道我的代码有什么问题。一切正常，直到我更改“google.charts.load('43', {packages: ['corechart']});”行 我尝试更改函数名称，但仍然无法正常工作。我为我的英语感到抱歉，我对代码很业余。

图一

<script type="text/javascript"
        src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(chart2);
function chart2() {
var wrapper = new google.visualization.ChartWrapper(
{"containerId":"2C2D","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"březen","f":null},{"v":1844,"f":null},{"v":143739,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":150000,"min":null},"minValue":null,"maxValue":160000,"logScale":false,"gridlines":{"count":"4"}},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","series":{"1":{"color":"#b7b7b7"}},"fontName":"Georgia","title":"Náklady CZK"},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"}
);
wrapper.draw();
};
</script>
<div style='border: 0px darkgray solid;width:500px;'>
<div id='2C2D' style='width:500px; height:200px;'></div>
</div>

图 2

<script type="text/javascript"
        src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var wrapper = new google.visualization.ChartWrapper(
{"containerId":"visualizationDCA3","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"březen","f":null},{"v":62036,"f":null},{"v":2213460,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":2500000,"min":null},"minValue":null,"maxValue":2500000,"logScale":false},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","fontName":"Georgia","title":"Celkový CZK","series":{"1":{"color":"#b7b7b7"}}},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"}
);
wrapper.draw();
};
</script>
<div style='border: 0px darkgray solid;width:500px;'>
<div id='visualizationDCA3' style='width:500px; height:200px;'></div>
</div>

`

4

1 回答 1

0

您可以添加一个init函数，然后从那里调用其他图表...

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

function init() {
  drawChart();
  chart2();
}

function drawChart() {
  var wrapper = new google.visualization.ChartWrapper(
    {"containerId":"visualizationDCA3","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"brezen","f":null},{"v":62036,"f":null},{"v":2213460,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":2500000,"min":null},"minValue":null,"maxValue":2500000,"logScale":false},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","fontName":"Georgia","title":"Celkový CZK","series":{"1":{"color":"#b7b7b7"}}},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"}
  );
  wrapper.draw();
};

function chart2() {
  var wrapper = new google.visualization.ChartWrapper(
    {"containerId":"2C2D","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"brezen","f":null},{"v":1844,"f":null},{"v":143739,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":150000,"min":null},"minValue":null,"maxValue":160000,"logScale":false,"gridlines":{"count":"4"}},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","series":{"1":{"color":"#b7b7b7"}},"fontName":"Georgia","title":"Náklady CZK"},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"}
  );
  wrapper.draw();
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div style='border: 0px darkgray solid;width:500px;'>
<div id='visualizationDCA3' style='width:500px; height:200px;'></div>

<div style='border: 0px darkgray solid;width:500px;'>
<div id='2C2D' style='width:500px; height:200px;'></div>

于 2016-05-03T16:49:12.257 回答