歷經(jīng)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，根據(jù)代碼制作出相應(yīng)的圖表，下面為兩個特殊圖表示例，更多示例，慧都不定期奉上。

疊加氣泡圖：

疊加氣泡圖代碼：

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