Question

我需要构建一个自定义设计的条形图，显示一些简单的数据。以下是我的要求。任何人都可以根据我的要求推荐最好的网络技术。

浏览器兼容性高
绘制形状的能力
使用渐变填充形状的能力
能够为不同的形状（图表中的条形图）设置onclick和onmouseover事件。

谢谢你们。我正在考虑使用svg但寻找建议。

Answer 1

Raphaël怎么样 - 它是 SVG / VML 。它说：

浏览器兼容性：

Raphaël目前支持Firefox 3.0 +，Safari 3.0 +，Opera 9.5+和Internet Explorer 6.0 +。

绘制形状的能力

圆，矩形，椭圆，图像，文字，路径

能够使用渐变填充形状

是

能够进行onclick和onmouseover事件

是：

...你的每一个图形对象 create也是一个DOM对象，所以你可以附加JavaScript事件处理程序或稍后修改它们。

reference

中的所有内容

最重要的是，有一个名为gRaphael的插件，可以更轻松地创建图表。

Answer 2

简单数据 - Google Charts API或Google Visualization API可能适合您。

有关图像图表所有功能的详细信息，请参阅Chart feature list

您还可以查看Charts API和Visualization API的comparison。

Answer 3

另一个候选人当然是JQuery SVG - 如果你已经熟悉jquery，你可能更喜欢这个。

在SO上有JQuery SVG和Raphaël的比较： jQuery SVG vs. Raphael

Answer 4

我建议使用Adobe Flex。下面是一个如何在Flex中轻松创建饼图的示例：

   <mx:Panel title="Pie Chart">
 <mx:PieChart id="myChart" 
    dataProvider="{expenses}" 
    showDataTips="true"
 >
    <mx:series>
       <mx:PieSeries 
            field="Amount" 
            nameField="Expense" 
            labelPosition="callout"
       />
    </mx:series>
 </mx:PieChart>
 <mx:Legend dataProvider="{myChart}"/>

根据您的标准：

高浏览器兼容性：Flex在95％以上的浏览器中使用，并且在所有浏览器中的行为相同。不再需要检查您的网络应用程序是否正在运行，例如firefox，chrome等...因为任何具有Flash播放器的浏览器都是兼容的。
绘制形状的能力：Flash的最大优势是绘制能力。图表是完全可定制的，可以换肤，以达到您所需的外观。
能够使用渐变填充形状 - 通过设置样式属性或自定义皮肤轻松完成。
能够为不同的形状设置onclick和onmouseover事件 - 请参阅this link以了解创建用户与图表交互的一些简单方法。

Answer 5

您好希望此链接可以帮助您在搜索类似于您所寻找的解决方案时找到它：

http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart

我正在尝试gRaphael，但我在查找文档时遇到了困难。你必须阅读代码并使用爆炸而不是min.js

Answer 6

我想分享jquery.jqplot.js。它有很多jQuery选项，但依赖于其他插件，如syntaxhighliter等。

用于构建动态图表的最佳Web技术

6 个答案: