问题描述
我正在尝试将Google图表实施为Datastudio可视化javascript代码。 我的JS不太好,但这是我到目前为止所做的。
-
我已经用“ npx @ google / dscc-gen viz”安装了所有依赖项
-
我已经使用“ npm i -D google-charts”安装了Google图表库
-
我正在尝试使用这两种方法来调用该库,但是我总是收到错误消息:“未捕获的TypeError:无法读取未定义的属性'load'”
const GoogleCharts = require('google-charts');
从“ google-charts”导入{GoogleCharts};
很抱歉,如果我写的内容有些混乱,但是我唯一要做的就是从我的datastudio报告中的Google图表中实现树形图。
预先感谢
编辑:
更具体地说,Data Studio社区可视化是Data Studio的一项新功能,您可以在其中将JS代码添加到DS页面。 为了实现chart.js或d3.js图,社区使用了多种方法。 我想做的就是使用Google Graph图表库。问题是我无法使用该库。
在下面,您可以找到我需要实现的代码,我获取此代码的链接是:https://developers.google.com/chart/interactive/docs/gallery/treemap
google.charts.load('current',{'packages':['treemap']});
google.charts.setonLoadCallback(drawChart);
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data,{
minColor: '#f00',midColor: '#ddd',maxColor: '#0d0',headerHeight: 15,fontColor: 'black',showScale: true
});
我发现的第一个问题与如何使用Google图表库有关,为了解决此问题,我使用以下命令来添加库“ npm i -D google-图表”。 现在的问题是我无法使用该库,因为我总是收到错误“未捕获的TypeError:无法读取未定义的属性'load'”。
在下面,您可以找到我的代码:
const dscc = require('@google/dscc');
const viz = require('@google/dscc-scripts/viz/initialViz.js');
const local = require('./localMessage.js');
const google = require('google-charts')
export const LOCAL = true;
const drawViz = (data) => {
google.charts.load('current',{'packages':['treemap']});
google.charts.setonLoadCallback(drawChart);
function drawChart() {
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data,{
minColor: '#f00',showScale: true
});
}
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribetoData(drawViz,{transform: dscc.objectTransform});
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)