blocks|key|1721495|text|拉斐尔呢-它是SVG/VML。上面写着：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1721496|浏览器兼容性：|1721497|Rapha+l目前支持火狐3.0%2B、Safari+3.0%2B、Opera+9.5%2B和Internet+6.0%2B。|blockquote|1721498|绘制形状的能力|1721499|圆圈，直角，椭圆，图像，文字，路径|1721500|用梯度填充形状的能力|1721501|是|1721502|具有onclick和onmouseover+的能力|1721503|是：|1721504|..。您创建的每个图形对象也都是DOM对象，因此您可以附加JavaScript事件处理程序或稍后修改它们。|1721505|参考文献中的一切|1721506|除此之外，还有一个名为gRaphael的插件，它可以简化图表的创建。|1721507|entityMap|0|LINK|mutability|MUTABLE|url|http://raphaeljs.com/|1|http://raphaeljs.com/reference.html|2|http://g.raphaeljs.com/^0|7|7|0|3|0|0|0|7|0|0|0|7|0|0|0|3|0|0|0|M|0|0|0|0|4|1|0|B|8|2|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|F|3|G|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1N|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1R|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1V|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|20|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|21|8|@]|D|@$9|22|A|23|1|24]]|E|$]]|$1|10|3|11|5|6|7|25|8|@]|D|@$9|26|A|27|1|28]]|E|$]]|$1|12|3|-4|5|6|7|29|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]|1A|$5|15|16|17|E|$18|1B]]|1C|$5|15|16|17|E|$18|1D]]]]

How about <a href="http://raphaeljs.com/" rel="nofollow noreferrer">Raphaël</a> - it's SVG/VML.
It says:

Browser compatibility:

<blockquote>
 Raphaël currently supports Firefox
 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
</blockquote>

Ability to draw shapes

circle, rect, ellipse, image, text, path

Ability to fill shapes with gradients

yes

Ability to have onclick and onmouseover events

yes:

<blockquote>
 ... every graphical object you
 create is also a DOM object, so you
 can attach JavaScript event handlers
 or modify them later.
</blockquote>

Everything in the <a href="http://raphaeljs.com/reference.html" rel="nofollow noreferrer">reference</a>

On top of that, there's a plugin called <a href="http://g.raphaeljs.com/" rel="nofollow noreferrer">gRaphael</a> which makes the creation of charts easier.

blocks|key|1721559|text|简单的数据-+Google+Charts+API或Google可视化API可能适合你。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1721560|有关图像图表所有功能的详细信息，可在图表特征表上找到。|1721561|您还可以查看Charts的比较和可视化API。|1721562|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/apis/chart/image_charts.html|1|http://code.google.com/apis/visualization/interactive_charts.html|2|http://code.google.com/apis/chart/docs/chart_params.html|3|http://code.google.com/apis/charttools/docs/choosing.html^0|7|H|0|P|C|1|0|I|5|2|0|D|2|3|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|H|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]|T|$5|K|L|M|C|$N|U]]]]

Simple data - <a href="http://code.google.com/apis/chart/image_charts.html" rel="nofollow noreferrer">Google Charts API</a> or <a href="http://code.google.com/apis/visualization/interactive_charts.html" rel="nofollow noreferrer">Google Visualization API</a> may suit you.

Details for all features of image charts can be found on the <a href="http://code.google.com/apis/chart/docs/chart_params.html" rel="nofollow noreferrer">Chart feature list</a>

You may also take a look at the <a href="http://code.google.com/apis/charttools/docs/choosing.html" rel="nofollow noreferrer">comparison</a> of the Charts API and the Visualization API.

blocks|key|1389853|text|当然，另一个选择是JQuery+SVG+--如果您已经熟悉jquery，那么您可能更喜欢这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1389854|JQuery+SVG和Rapha+l在SO：jQuery+SVG诉Raphael上的比较|1389855|entityMap|0|LINK|mutability|MUTABLE|url|http://keith-wood.name/svgRef.html|1|https://stackoverflow.com/questions/588718/jquery-svg-vs-raphael^0|9|A|0|0|M|I|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Another candidate of course is <a href="http://keith-wood.name/svgRef.html" rel="nofollow noreferrer">JQuery SVG</a> - if you're already familiar with jquery you may prefer this one.

There's a comparison of JQuery SVG and Raphaël on SO:
<a href="https://stackoverflow.com/questions/588718/jquery-svg-vs-raphael">jQuery SVG vs. Raphael</a>

blocks|key|171685|text|我建议使用Adobe。下面是在Flex中创建饼图的一个例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|171686|+++<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}"/>|code-block|syntax|javascript|171687|​|171688|根据你的标准：|171689|高度的浏览器兼容性:在95%25以上的浏览器上使用Flex，在所有浏览器中的行为都是一样的。不再需要检查你的web应用程序是否运行在ie，firefox，chrome等.因为任何有闪存播放器的浏览器都是兼容的。|unordered-list-item|171690|绘制形状的能力:闪光灯最大的力量是绘制能力。图表是完全可定制的，并可实现您需要的外观。|171691|使用渐变填充形状的能力--通过设置样式属性或自定义皮肤来轻松完成。|171692|具有不同形状的onclick和onmouseover事件的能力--请参阅此链接获得一些创建用户与图表交互的简单方法。|offset|length|171693|entityMap|0|LINK|mutability|MUTABLE|url|http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf65c3d-7fff.html^0|0|0|0|0|0|0|0|10|3|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|17|8|@]|9|@]|A|$]]|$1|N|3|O|5|M|7|18|8|@]|9|@]|A|$]]|$1|P|3|Q|5|M|7|19|8|@]|9|@]|A|$]]|$1|R|3|S|5|M|7|1A|8|@]|9|@$T|1B|U|1C|1|1D]]|A|$]]|$1|V|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

I recommend using Adobe Flex. Below is an example of how easy pie chart creation can be in Flex:

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



Based on your criteria:

<ul>
<li>high browser compatibility: Flex is used on more than 95% of all browsers and behaves the same in all browsers. No more need to check if your web app is running in ie, firefox, chrome, etc... because any browser that has a flash player is compatible.</li>
<li>ability to draw shapes: Flash's greatest strength is the ability to draw. Charts are completely customizable and skinnable to achieve the look you need.</li>
<li>Ability to fill shapes with gradients - done easily by setting style attributes or a custom skin.</li>
<li>ability to have onclick and onmouseover events for the different shapes - see <a href="http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf65c3d-7fff.html" rel="nofollow">this link</a> for some easy ways to create user interactions with charts.</li>
</ul>

blocks|key|1390751|text|嗨，我希望这个链接可以帮助你，我在寻找与你所寻找的类似的解决方案时发现了这个链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1390752|http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart|offset|length|1390753|我正在尝试gRaphael，但我在寻找文档方面遇到了困难。您必须阅读代码，使用爆炸而不是min.js。|1390754|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|2F|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

Hi i hope this link may help you i found it while searching for a solution similar to what you're looking for:

<a href="http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart" rel="nofollow">http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart</a>

i'm trying gRaphael, i'm having difficulties on finding documentation though. you have to read the code and use the exploded instead of the min.js

blocks|key|1389883|text|我想分享一下jquery.jqplot.js。它有很多jQuery选项，但依赖于其他插件，如syntaxhighliter等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1389884|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I would like to share jquery.jqplot.js. It has lots of jQuery options, but depends on other plugins such as syntaxhighliter etc.

I need to build a custom designed bar chart that displays some simple data. Below are my requirements. Can anyone suggest the best web technology for my requirements. 

<ul>
<li>high browser compatibility</li>
<li>ability to draw shapes</li>
<li>ability to fill shapes with gradients</li>
<li>ability to have onclick and onmouseover events for the different shapes (bars in the chart). </li>
</ul>

Thanks guys. I was thinking of using svg but looking for suggestions.

Best web technology for building dynamic charts

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我需要建立一个自定义设计条形图，显示一些简单的数据。以下是我的要求。有人能为我的需求推荐最好的网络技术吗？高浏览器兼容性图形绘制能力用渐变填充形状的能力对不同形状(图表中的条形)具有onclick和onmouseover事件的能力。谢谢你们。我正在考虑使用svg，但希望得到一些建议。

问构建动态图表的最佳web技术
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问构建动态图表的最佳web技术EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问构建动态图表的最佳web技术
EN