让Google charts在Jade中工作
Google Charts是一个强大的数据可视化工具，可以帮助开发人员在网页中创建各种图表和图形。在Jade中使用Google Charts可以通过以下步骤完成：
- 引入Google Charts库：在Jade模板中的<head>标签中添加以下代码，以引入Google Charts库的JavaScript文件。
script(src='https://www.gstatic.com/charts/loader.js')- 加载Google Charts库：在Jade模板中的<script>标签中添加以下代码，以加载Google Charts库并设置要使用的图表包。
script.
google.charts.load('current', {packages: ['corechart']});- 创建图表数据：在Jade模板中的<script>标签中添加JavaScript代码，以创建要显示的图表数据。可以使用静态数据或从服务器获取动态数据。
script.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Sleep', 8],
['Eat', 2],
['Exercise', 2],
['Socialize', 4]
]);
var options = {
title: 'Daily Activities',
pieHole: 0.4
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}- 绘制图表：在Jade模板中的<script>标签中添加以下代码，以在指定的HTML元素中绘制图表。
script.
google.charts.setOnLoadCallback(drawChart);- 在Jade模板中指定图表容器：在Jade模板中的<body>标签中添加以下代码，以指定一个HTML元素作为图表的容器。
div#chart_div完成以上步骤后，Google Charts就可以在Jade中工作了。它将创建一个饼图，显示每天的活动时间分配情况。可以根据需要修改图表数据和选项，以满足具体的需求。
注意：以上代码仅为示例，实际应用中可能需要根据具体情况进行修改和调整。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）可以作为Jade模板的部署和存储解决方案。您可以通过以下链接了解更多关于这些产品的信息：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
相关·内容
我的谷歌图表在这个小提琴上运行良好：因为我需要图表是动态的，所以我希望有一种方法可以让Google charts在Jade环境中工作</em
浏览 1提问于2016-07-02得票数 0
我试过了在layout.jade的头部，但它不工作，错误404。然后我试着通过app.js：app.get('/charts', routes.charts);exports.charts
浏览 0提问于2016-03-19得票数 0
2回答
悬停在其上时闪烁的工具提示
、、、、
当我的鼠标悬停在google图表上的实际工具提示上时，我会得到一个闪烁的工具提示。我一直在寻找解决方案，但到目前为止还不能解决这个问题。在这里他们。//Change: google.charts.load('42',{'pack
浏览 15提问于2017-12-24得票数 1
回答已采纳
在我的例子中，我想使用可用的Google图表定义。我已经使用以下命令安装了它们npm install --save-dev @types/google-apps-scriptimport { Google } from '@types/google-apps-script';
但是Visual Studio Code抛
浏览 0提问于2017-12-11得票数 2
1回答
/node_modules/angular2-google-chart/directives/angular2-google-chart.directive.ts模块生成中的错误失败:错误: /home/user/Desk/project/frontend/node_modules/angular2-google-chart/directives/angular2-google
浏览 0提问于2018-07-05得票数 1
回答已采纳
2回答
google.charts.load('current',{'packages':['bar']});var data = new google.visualization.DataTable();data
浏览 6提问于2016-11-01得票数 8
回答已采纳
1回答
我试图在一个for循环中绘制多个Google图表，但似乎无法让它工作。我已经看到一些类似的问题被问到了，但仅限于PHP。有人能帮忙吗？这就是我到目前为止尝试过的
浏览 3提问于2017-03-10得票数 4
回答已采纳
但是，当我将“调用列表”转换为for..in循环时，似乎只有数组中的最后一个元素可以“工作”。for (var value in allData) {};
//google.charts.setOnLoadCallback(function() { (a
浏览 0提问于2016-12-08得票数 0
1回答
使用google图表，试图在图表绘制完成后从图表中获取一个值，我知道我需要在“绘图”完成后运行一个回调函数--但我无法让它工作……在函数"afterDraw“完成后，在哪里调用函数”“以使其运行？谢谢:)google.charts.load('current', {'packages':['corechart']});
google.charts</e
浏览 1提问于2016-09-27得票数 8
回答已采纳
单独加载文件时，错误是loader.js:135 Uncaught TypeError: Cannot read property 'length' of undefined中的loader.js:135<html> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></
浏览 3提问于2016-07-01得票数 2
回答已采纳
我在试着把条形图上两条线的分钟数相加，结果它断了。
var _googleColumnBasic = function() {
google.charts.load('visualization', '1.0', {'packages':[&
浏览 2提问于2020-09-19得票数 1
回答已采纳
电流输出：理想输出：相关研究：google.charts.setOnLoadCallback(drawChart);
vardata = google.visualization.arr
浏览 4提问于2019-11-27得票数 1
回答已采纳
我正在使用谷歌地理图表，并按照谷歌的文档()设置这样的图表：google.setOnLoadCallbackvar data = google.visualization.arrayToDataTable(a1);
var chart = new google.visualizatio
浏览 11提问于2016-02-01得票数 4
回答已采纳
我有一个通过Google Charts API呈现的图表。当用户单击Bar时，如何获取有关所选bar的数据。我对它的理解是，我调用"getSelection“来输出选择信息。我的代码是 <div class="row"> google.charts.load('current', {'packages'
浏览 0提问于2017-09-15得票数 3
2回答
我想将下面截图中的“步骤1”替换为表格中的实际文本。google.charts.load("current", {"packages": ["bar"] });
},
drawCharts : f
浏览 2提问于2017-03-06得票数 3
回答已采纳
像googleLoaded和google这样的变量变得没有定义。我使用了来自的指令代码<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
浏览 0提问于2018-06-28得票数 1
回答已采纳
2回答
数组到google图表
、、、
我试图将一个数字数组传递给google图表，这个数组是由这个代码从带有类.likescount的div中提取的。，因为我使用附件来打印它和它的工作，很难的部分是将数据传递给data.addRows，这是我正在使用的完整代码，在它周围工作，但从未工作过，我在跟踪一个让它运行的家伙，但是如果没有运气，任何帮助都会很棒"text/javascript">
google.charts.load('curre
浏览 1提问于2017-08-14得票数 5
回答已采纳
google.load("visualization", "1", { packages: ["corechart", "line"] });var data = google.visualization.arrayToDataTable([
['Year', 'Sales', '
浏览 1提问于2016-08-08得票数 1
回答已采纳
1回答
图解圆半径谷歌图
、、
我想改变图例中颜色圆圈的半径。<circle cx="8" cy="8" r="8" stroke="none" stroke-width="0" fill="#de6913" style="下面是一个分段的标准示例：
google.charts.load('current', {'packages'
浏览 0提问于2016-07-26得票数 2
回答已采纳
1回答
如何让prepros观看Jade模板中的HTML包含文件？
在更新包含的HTML之后，还要保存Jade文件，这让人有点厌烦。Codekit有这个功能，你有什么想法让它在Jade中工作吗？
浏览 4提问于2015-06-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
