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

Question

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

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

Answer 1

您是否查看过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>