g2.js 882 B

1234567891011121314151617181920212223242526
  1. var data = [
  2. {genre: 'Sports', sold: 275},
  3. {genre: 'Strategy', sold: 115},
  4. {genre: 'Action', sold: 120},
  5. {genre: 'Shooter', sold: 350},
  6. {genre: 'Other', sold: 150},
  7. ]; // G2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
  8. // Step 1: 创建 Chart 对象
  9. var chart = new G2.Chart({
  10. id: 'c1', // 指定图表容器 ID
  11. width : 600, // 指定图表宽度
  12. height : 300 // 指定图表高度
  13. });
  14. // Step 2: 载入数据源
  15. chart.source(data, {
  16. genre: {
  17. alias: '游戏种类' // 列定义,定义该属性显示的别名
  18. },
  19. sold: {
  20. alias: '销售量'
  21. }
  22. });
  23. // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
  24. chart.interval().position('genre*sold').color('genre')
  25. // Step 4: 渲染图表
  26. chart.render();