AnyChart JavaScript版如何设置图表背景颜色和边框

作者:控件中国网   出处:控件中国网   2015-07-01 10:31:35   阅读:23

AnyChart从7.0开发全面采用JavaScript了,不再使用Flash作为图表显示容器,如果需要flash显示的则可以购买6.2版本,在新版本中如何使用JavaScript快速设置图表的背景颜色那些呢,下面咱们进行简单的介绍:

图表背景边框的设置
在新版本中控件使用.stroke()来设置边框的颜色和线条样式,如: "Solid", "Dashed" 和"Gradient",如果是设置为"Solid",那么使用color属性来进行颜色设置,如果设置为 "Gradient",那么需要采用 gradient keys来进行颜色的配置,同样地"Dashed"也是采用指定的Keys来设置颜色,具体代码如下:
1. 设置为solid时
chart.background().stroke('5 red');
2. 设置为gradient时
chart.background().stroke({
  keys: ['.1 red', '.5 yellow', '.9 blue'],
  angle: 45,
  thickness: 5
});
3.设置为dashed时
chart.background().stroke({color: 'red', dash: '5 2 5', thickness: 5});

效果如下:

border.png

图表背景颜色的设置
AnyChart的背景色设置采用.fill()方法,背景色填充时可以设置为solid,也可以是采用gradient模式,或者是直接填充图片,具体参考下面的代码:

1. solid填充样式
chart.background().fill('gold');

SolidBack.png
2.gradient填充样式
chart.background().fill({
    keys: ['.1 lightblue', '.7 blue', '.9 darkblue'],
    angle: -130,
});

GradientBack.png
3.Image填充背景
chart.background().fill({
    src: 'http://static.AnyChart.com/underwater.jpg',
    mode: acgraph.vector.ImageFillMode.FILL
});

ImageBack.png

图表背景转角样式设置
图表背景边框转角默认是直角,开发人员可以通过控件提供的方法来设置转角的样式,分别有 "Square", "Rounded", "Cut" and"RoundedInner"四种样式,具体设置代码如下:
1.round样式
chart.background().stroke('3 red')
    .cornerType('round')
    .corners(10);
2.cut样式
chart.background().stroke('black')
    .cornerType('cut')
    .corners(0, 0, 5, 5);

效果如下:
 

corners.png

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat