原創|對比評測|編輯:龔雪|2014-01-09 09:28:53.000|閱讀 384 次
概述:新版本amCharts(JavaScript Charts 、Javascript Stock Chart) & amMap(JavaScript Maps)增加了主題功能,現在我們可以根據自己的喜好設置圖表的外觀。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
現在amCharts(JavaScript Charts 、Javascript Stock Chart) & amMap(JavaScript Maps)支持主題設置功能,這意味著我們可以在主題文件中使用新的默認設置,不再需要為每一個圖表、坐標軸設置屬性。大大減輕了操作流程。
為了幫助您更好的理解該功能,我們為您提供參考代碼示例。
效果圖:
代碼:
AmCharts.makeChart("chartdiv", { type: "serial", theme: "light", dataProvider: [{ "year": 2005, "income": 23.5, "expenses": 18.1 }, { "year": 2006, "income": 26.2, "expenses": 22.8 }, { "year": 2007, "income": 30.1, "expenses": 23.9 }, { "year": 2008, "income": 29.5, "expenses": 25.1 }, { "year": 2009, "income": 24.6, "expenses": 25 }], categoryField: "year", startDuration: 1, rotate: true, categoryAxis: { gridPosition: "start" }, valueAxes: [{ position: "top", title: "Million USD", minorGridEnabled: true }], graphs: [{ type: "column", title: "Income", valueField: "income", fillAlphas: 1, balloonText: "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" }, { type: "line", title: "Expenses", valueField: "expenses", lineThickness: 2, bullet: "round", balloonText: "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" }], legend: { useGraphSettings: true } });
JS設置中沒有顏色選擇,他們都被定義在light.js文件中(查看參考資料部分)。現在,比如,我想把深色背景的div設置為淺色背景,只需要從JOSN中改變主題設置,即設置深色為淺色。然后運行腳本,你將會看到圖表背景顏色的變化。
當前,你可以在amcharts/themes (或者 ammap/themes) 文件夾中找到3種主題包。你可以根據自己的需求情況更改這些主題。
為圖表添加主題,你需要為文件名設置屬性,值得注意的是,這個操作只能在JOSN中才能設置,所以我們建議大家升級到最新版本并使用JOSN。這里我們提供設置代碼(以深色轉淺色為例):
var graph = new AmCharts.AmGraph(AmCharts.themes.light);
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網