半岛权威十大直营(官方)网站

历经21载，65,000+客户的肯定，免费的Javascript库jChartFX再次迎来了更新，本次更新最大的亮点就是添加了多种图表库，支持更多的2D、3D 图表类型以及特殊图表。下面我们一起来看看更新详情：

• 新增多种图表库，支持超过 40种不同2D和3D图表类型
• 支持动画，图表类型可定制
• 支持 HTML5、jQuery、javascript
• 支持主流浏览器： IE9+, Firefox 4+, Safari 3+和Chrome等
• 更加出众的API,让编程更容易，提高了建造速度

jChartFX v7.1还更新了不少特殊图表类型，感兴趣的朋友可以点击下载：jChartFX v7.1，根据代码制作出相应的图表，下面为两个特殊图表示例，更多示例，慧都不定期奉上。

叠加气泡图：

叠加气泡图代码：

var overlayBubble = new cfx.overlaybubble.OverlayBubble();
chart1.setGalleryAttributes(overlayBubble);
var items = [{ "Value": 9765, "Quarter": "Q1" }, { "Value": 14235, "Quarter": "Q2" }, { "Value": 4562, "Quarter": "Q3" }, { "Value": 12351, "Quarter": "Q4"}];
chart1.setDataSource(items);
var td;
td = new cfx.TitleDockable();
td.setText("OverlayBubble");
chart1.getTitles().add(td);

chart1.create(document.getElementById('div_Chart'))

密度图：

密度图代码：

var data = chart1.getData();
data.setSeries(1);
data.setPoints(500);
for (var i = 0; i < 100; i++) {
data.getX().setItem(0, i, Math.random() * 100);
data.getY().setItem(0, i, Math.random() * 1000);
}
for (var i = 100; i < 250; i++) {
data.getX().setItem(0, i, (Math.random() * 50) + 25);
data.getY().setItem(0, i, (Math.random() * 500) + 250);
}
for (var i = 250; i < 500; i++) {
data.getX().setItem(0, i, (Math.random() * 20) + 40);
data.getY().setItem(0, i, (Math.random() * 200) + 400);
}
var density = new cfx.density.Density();
chart1.setGalleryAttributes(density);
chart1.getAxisY().getGrids().getMajor().setVisible(false);
chart1.getLegendBox().setVisible(false);
var td;
td = new cfx.TitleDockable();
td.setText("Density");
chart1.getTitles().add(td);

chart1.create(document.getElementById('div_Chart'))