gpt4 book ai didi

javascript - 如何动态获取html5中的图表和报告?

转载 作者:行者123 更新时间:2023-11-29 15:27:04 26 4
gpt4 key购买 nike

我正在使用 phonegap 开发一个 android 平板电脑应用程序,我需要在其中获取一个报告图表,以图表方式解释不同事物的状态,如下图所示。

enter image description here

我想动态生成这些图表或报告,它们会随着数据的变化而变化。谁能帮我提供一些使用 html5、js 和 css 的示例,它们具有一些类似的功能?

最佳答案

您是否查看过RGraph:HTML5 和 Javascript 图表

RGraph 是一个用 Javascript 编写的图表库,使用 HTML5 绘制并支持超​​过二十种不同类型的图表。使用新的 HTML5 canvas 标签,RGraph 使用 Javascript 在网络浏览器中创建这些图表,这意味着更快的页面和更少的网络服务器负载。这会带来更小的页面大小、更低的成本和更快的网站 - 每个人都是赢家!


如果你看到一个基本代码,它是这样的:

<script>
window.onload = function ()
{
// The data to be shown on the Pie chart
var data = [564,155,499,611,322];

// Create the Pie chart. The arguments are the canvas ID and the data to be shown.
var pie = new RGraph.Pie('myPie', data);

// Configure the chart to look as you want.
pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']);
pie.Set('chart.linewidth', 5);
pie.Set('chart.stroke', 'white');

// Call the .Draw() chart to draw the Pie chart.
pie.Draw();
}
</script>

查看 Pie charts 的实例!


您的是雷达图。在这里查看一个:Radar Charts .源代码:

<script>
window.onload = function ()
{
// The data to be represented on the Radar chart.
var data = [3, 3, 41, 37, 16];

// Create the Radar chart. The arguments are the canvas ID and the data to be shown on the chart.
var radar = new RGraph.Radar('myRadar', data);

// If you want to show multiple data sets, then you give them like this:
// var radar = new RGraph.Radar('myRadar', [3,5,6,8], [4,5,2,6]);

// Configure the Radar chart to look as you wish.
radar.Set('chart.background.circles', true);
radar.Set('chart.color', 'rgba(255,0,0,0.5)');
radar.Set('chart.circle', 20);
radar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)');
radar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']);
radar.Set('chart.key', ['Market share', 'A made up figure']);

// Now call the .Draw() method to draw the chart.
radar.Draw();
}
</script>

关于javascript - 如何动态获取html5中的图表和报告?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11190340/

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