JQuery Chart 是一個(gè)強(qiáng)大的 JavaScript 庫,可以幫助你輕松地生成各種類型的圖表,例如柱形圖、餅圖、線圖等等。
它使用了 HTML5 和 CSS3 技術(shù),使得圖表可以在多種設(shè)備和瀏覽器上無縫運(yùn)行,同時(shí)具有靈活性和易于使用性。
$(document).ready(function(){
// 創(chuàng)建一個(gè)柱形圖
$("#chart").kendoChart({
title: {
text: "銷售額"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "2018",
data: [500, 700, 1000, 1200, 1500]
},{
name: "2019",
data: [600, 800, 1100, 1300, 1600]
}],
valueAxis: {
labels: {
format: "${0}"
},
line: {
visible: false
}
},
categoryAxis: {
categories: ["Q1", "Q2", "Q3", "Q4", "全年"]
},
tooltip: {
visible: true,
format: "{0}%"
}
});
});
在上面的代碼示例中,我們首先使用 $() 函數(shù)來獲取頁面元素,并在文檔準(zhǔn)備就緒時(shí)創(chuàng)建一個(gè)柱形圖。
我們設(shè)置了圖表的標(biāo)題(title)、圖例(legend)、數(shù)據(jù)系列(series)和數(shù)值軸(valueAxis),并設(shè)置了每個(gè)系列使用柱形圖(type: "column")來表示。
我們還為數(shù)值軸添加了格式化標(biāo)簽,以及在類別軸上添加了類別(categories)來表示刻度。
最后,我們設(shè)置了一個(gè)提示框(tooltip)來懸浮在每個(gè)柱形圖上,并用一個(gè)百分?jǐn)?shù)來格式化數(shù)據(jù)。
通過 JQuery Chart 可以輕松地創(chuàng)建各種類型的圖表,并在網(wǎng)站或應(yīng)用程序中以交互方式展示數(shù)據(jù),讓用戶更容易地理解和分析數(shù)據(jù)。它是一個(gè)非常有用且強(qiáng)大的工具,值得嘗試。