彩票走势图

体验JavaScript Charts & JavaScript Maps主题设置功能

原创|对比评测|编辑:龚雪|2014-01-09 09:28:53.000|阅读 349 次

概述:新版本amCharts(JavaScript Charts 、Javascript Stock Chart) & amMap(JavaScript Maps)增加了主题功能,现在我们可以根据自己的喜好设置图表的外观。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

现在amCharts(JavaScript Charts Javascript Stock Chart) & amMap(JavaScript Maps)支持主题设置功能,这意味着我们可以在主题文件中使用新的默认设置,不再需要为每一个图表、坐标轴设置属性。大大减轻了操作流程。

为了帮助您更好的理解该功能,我们为您提供参考代码示例。

效果图:

amCharts & amMap主题

代码:

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

>>下载JavaScript Charts<<

>>下载JavaScript Stock Chart<<

>>下载JavaScript Maps<<


标签:JavaScript

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP