gpt4 book ai didi

charts - 将仪表板中的 google 图表导出为 png

转载 作者:行者123 更新时间:2023-12-01 20:11:10 25 4
gpt4 key购买 nike

我正在尝试通过按钮将仪表板中的谷歌图表导出为 png 图像。但我收到以下错误 -

一个或多个参与者抽奖失败()未定义不是一个函数

这是代码:

<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {'packages':['controls']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);

// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {

// Create our data table.
var data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);



// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));

// Create a range slider, passing some options
var select = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
}
});

// Create a pie chart, passing some options
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
'width': 500,
'height': 300,
'legend': 'right'
}
});

google.visualization.events.addListener(chart, 'ready', function(e) {
document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
});

// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(select, chart);

// Draw the dashboard.
dashboard.draw(data);
}
</script>
</head>

<body>
<div id='png'></div>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
</body>
</html>

请帮我解决我哪里出错了。

最佳答案

fiddle 总是有帮助的!

https://jsfiddle.net/kujxsn7z/

我改变的事情:

  • 创建了一个 div 来保存您尝试调用的 PNG 输出
  • getImageURI() 失败,因为您将其应用到ChartWrapper,不在图表对象上。因此,要解决此问题,您需要调用,在您的实例中:

    chart.getChart().getImageURI()

因此,您引用 ChartWrapper,使用 getChart 引用它包含的图表,然后对图表对象本身执行 getImageIRI()。

关于charts - 将仪表板中的 google 图表导出为 png,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30566394/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com