Data Studio社区签证| Google Charts实施

如何解决Data Studio社区签证| Google Charts实施

我正在尝试将Google图表实施为Datastudio可视化javascript代码。 我的JS不太好，但这是我到目前为止所做的。

1. 我已经用“ npx @ google / dscc-gen viz”安装了所有依赖项

2. 我已经使用“ npm i -D google-charts”安装了Google图表库

3. 我正在尝试使用这两种方法来调用该库，但是我总是收到错误消息：“未捕获的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});
}