theme 图表样式

简介图表主题图表样式设置图表主题切换局部样式设置示例简介在图表样式上，G2 提供了丰富的自定义配置选项，即可从全局设置，也支持局部设置数据层级的设置。 图表主题G2 默认提供了三种图表主题： default、dark、cheery。 image 图表样式设置图表主题切换（1）方式一： 直接传入主题名

  1. var Global = G2.Global; // 获取 Global 全局对象
  2. Global.setTheme('dark'); // 传入值为 'default'、'dark'、'cheery'的一种，如果不是，那么使用 default 主题。

（2）方式二： 传入 G2.Theme 对象

  1. var Global = G2.Global; // 获取 Global 全局对象
  2. var Theme = G2.Theme; // 获取 Theme 对象，包含三个属性： 'default' 'dark' 'cheery' 对应主题名 
  3. Global.setTheme(Theme['cheery']); // 传入值为 'default'、'dark'、'cheery'的一种，如果不是，那么使用 default 主题。

局部样式设置G2 图表样式的配置项都是设置到全局变量 G2.Global 上，可以通过如下两种方式进行局部的样式设置： （1）方式一： 直接赋值给全局对象 Global，但是不推荐

  1. G2.Global.animate = false ; // 关闭默认动画
  2. G2.Global.colors['default'] = ['red','blue','yellow']; // 更改默认的颜色

(2) 方式二： 使用 Global.setTheme 方法。推荐使用这种方式，使用方法如下：

  1. var theme = G2.Util.mix(true, {}, G2.Theme, {
  2.   animate: false,
  3.   colors: {...},
  4.   shapes: {...}
  5.   // 具体的配置项详见 api/global.html
  6. });
  8. G2.Global.setTheme(theme); // 将主题设置为用户自定义的主题

对于数据级别或者更细粒度的样式设置，可以通过 color 图形属性或者各个 chart 配置项上的图形属性设置。 更多 Global 上关于主题的配置属性，请查看 Global API。 示例

  1. var theme = G2.Util.mix(true, {}, G2.Theme, {
  2.   shape: {
  3.     polygon: {
  4.       stroke: ‘#213c51’, // 地图轮廓线颜色
  5.       lineWidth: 1 // 地图轮廓线宽度
  6.     },
  7.     hollowPoint: {
  8.       fill: ‘#21273b’, // 点的填充颜色
  9.       lineWidth: 2, // 点的边框宽度
  10.       radius: 3 // 点的半径
  11.     },
  12.     interval: {
  13.       fillOpacity: 1 // 填充透明度设置
  14.     }
  15.   },
  16.   axis: {
  17.     bottom: {
  18.       labels: {
  19.         label: { fill: ‘#999’} // 底部标签文本的颜色
  20.       }
  21.     },
  22.     left: {
  23.       labels: {
  24.         label: { fill: ‘#999’} // 左部标签文本的颜色
  25.       }
  26.     },
  27.     right: {
  28.       labels: {
  29.         label: { fill: ‘#999’} // 右部标签文本的颜色
  30.       }
  31.     }
  32.   }
  33. });
  34. G2.Global.setTheme(theme);
  36. $.getJSON(‘../../../../../static/data/china.json’, function(mapData) {
  37.   var Stat = G2.Stat;
  38.   var userData = [];
  39.   var features = mapData.features;
  40.   for(var i=0; i<features.length; i++) {
  41.     var name = features[i].properties.name;
  42.     userData.push({
  43.       "name": name,
  44.       "value": Math.round(Math.random()1000)
  45.     });
  46.   }
  47.   var chart = new G2.Chart({
  48.     id: ‘c1’,
  49.     width: 600,
  50.     height: 320,
  51.     plotCfg: {
  52.       margin: [20, 80, 0, 80]
  53.     }
  54.   });
  55.   chart.source(userData);
  56.   chart.tooltip({
  57.     title: null,
  58.     map: {
  59.       name: "name",
  60.       value: "value"
  61.     }
  62.   });
  63.   chart.legend(false);
  64.   chart.polygon().position(Stat.map.region(‘name’, mapData)).color(‘value’,‘#39ccf4-#20546b’).style({
  65.     lineWidth: 1,
  66.     stroke: ‘#999’
  67.   });
  68.   chart.render();
  70.   var data = [
  71.     {‘time’: ‘10:10’, ‘call’: 4, ‘waiting’: 2, ‘people’: 2},
  72.     {‘time’: ‘10:15’, ‘call’: 2, ‘waiting’: 6, ‘people’: 3},
  73.     {‘time’: ‘10:20’, ‘call’: 13, ‘waiting’: 2, ‘people’: 5},
  74.     {‘time’: ‘10:25’, ‘call’: 9, ‘waiting’: 9, ‘people’: 1},
  75.     {‘time’: ‘10:30’, ‘call’: 5, ‘waiting’: 2, ‘people’: 3},
  76.     {‘time’: ‘10:35’, ‘call’: 8, ‘waiting’: 2, ‘people’: 1},
  77.     {‘time’: ‘10:40’, ‘call’: 13, ‘waiting’: 1, ‘people’: 2}
  78.   ];
  79.   var Frame = G2.Frame;
  80.   var frame = new Frame(data);
  81.   frame = Frame.combinColumns(frame,[‘call’,‘waiting’],‘count’,‘type’,[‘time’, ‘people’]);
  82.   var chart2 = new G2.Chart({
  83.     id: ‘c2’,
  84.     width: 600,
  85.     height: 250
  86.   });
  87.   chart2.source(frame, {
  88.     ‘count’: {alias: ‘话务量（通）’, min: 0},
  89.     ‘people’: {alias: ‘人数（人）’, min: 0}
  90.   });
  91.   chart2.axis(‘time’, {
  92.     title: null // 去除 X 轴标题
  93.   });
  94.   chart2.legend(false);// 不显示图例
  95.   chart2.intervalStack().position(‘timecount’).color(‘type’, [‘#348cd1’, ‘#43b5d8’]); // 绘制层叠柱状图
  96.   chart2.line().position(‘timepeople’).color(‘#5ed470’).size(4).shape(‘smooth’); // 绘制曲线图
  97.   chart2.point().position(‘timepeople’).color(‘#5ed470’); // 绘制点图
  98.   chart2.render();
  99. });

  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="