加载中...

坐标轴翻转


调试运行

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>图形展示</title>
  6. </head>
  7. <body>
  8. <div class="detail-section">
  9. <div id="canvas">
  10. </div>
  11. </div>
  12. <script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script>
  13. <!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js -->
  14. <script type="text/javascript">
  15. var chart = new AChart({
  16. theme : AChart.Theme.SmoothBase,
  17. id : 'canvas',
  18. width : 950,
  19. height : 500,
  20. plotCfg : {
  21. margin : [50,50,80] //画板的边距
  22. },
  23. invert : true,
  24. xAxis : { //坐标轴更改位置和文本配置信息
  25. position : 'left', //x轴居左
  26. labels : {
  27. label : {
  28. 'text-anchor' : 'end',
  29. x : -12,
  30. y : 0
  31. }
  32. }
  33. },
  34. yAxis : {
  35. position : 'bottom',
  36. labels : {
  37. label : {
  38. 'text-anchor' : 'end',
  39. y : 20,
  40. x : 12
  41. }
  42. }
  43. },
  44. seriesOptions : { //设置多个序列共同的属性
  45. areaCfg : { //如果数据序列未指定类型,则默认为指定了xxCfg的类型,否则都默认是line
  46. markers : {
  47. single : true
  48. },
  49. pointStart: 1940,
  50. pointInterval: 1
  51. }
  52. },
  53. tooltip : {
  54. valueSuffix : '°C'
  55. },
  56. series : [{
  57. name: 'Africa',
  58. data: [106, 107, 111, 133, 221, 767, 1766,855]
  59. }, {
  60. name: 'Europe',
  61. data: [163, 203, 276, 408, 547, 729, 628,460]
  62. }]
  63. });
  64. chart.render();
  65. </script>
  66. </body>
  67. </html>

还没有评论.