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

Question

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

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

Answer 1

您是否查看了RGraph：HTML5 和 Javascript 图表？

RGraph是一个用 Javascript 编写的图表库，它使用 HTML5 来绘制并支持二十多种不同类型的图表。使用新的 HTML5 画布标签，RGraph 使用 Javascript 在 Web 浏览器中创建这些图表，这意味着更快的页面和更少的 Web 服务器负载。这导致更小的页面尺寸、更低的成本和更快的网站 - 每个人都赢了！

---

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

<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>

查看饼图的实时示例！

---

你的是雷达图。在这里查看一个：雷达图。源代码：

<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>

Answer 2

检查下面的链接。它确实有一些很好的例子。

http://www.highcharts.com/

如果您还有任何问题，请告诉我

Answer 3

一种可能的解决方案是将CSS3 转换映射到图形。 这是一个基本示例，演示了您可以在不使用任何 javascript 的情况下做什么。

以下是使用 css（无 javascript）生成的一些静态示例，我很难找到交互式示例，但正如前面的链接之一所示，这是可能的。