当前位置:主页 > JavsScript库 > 图表 >

可定制的SVG折线图javascript库 - odi.linechart.js
栏目分类:图表   发布日期:2021-09-28   浏览次数:

odi.linechart.js 是一个 JavaScript 库,用于使用 SVG 绘制可定制的单线或多线图表。

使用:

1. 加载 odi.linechart.js JavaScript 库。

《script src="odi.linechart.js"></script>

2. 在页面上创建图表容器。

《div id="example"></div>

3.初始化odi.linechart.js并定义自己的数据系列如下:

varexample = ODI.linechart(document.getElementById('custom'),{
  
    // offset
    'left':20,
    'right':50,
    'top':60,
    'bottom':8,
  
    // define your data here
    'axis':{
      'x':{
        'line': {'stroke':'#888', 'stroke-width': 2},
        'grid': {'show':true,'stroke':'#888'},
        'labels':{
          2014: {'label':'2014','fill':'#888','length':0,'align':'top','dy':-60},
          2015: {'label':"'15",'fill':'#888','length':0,'align':'top','dy':-60},
          2016: {'label':"'16",'fill':'#888','length':0,'align':'top','dy':-60},
          2017: {'label':"'17",'fill':'#888','length':0,'align':'top','dy':-60},
          2018: {'label':"'18",'fill':'#888','length':0,'align':'top','dy':-60},
          2019: {'label':"'19",'fill':'#888','length':0,'align':'top','dy':-60},
          2020: {'label':"2020",'fill':'#888','length':0,'align':'top','dy':-60}
        }
      },
      'y':{
        'line': {'show':false},
        'grid': {'show':true,'stroke':'#888'},
        'min': 0,
        'max': 200,
        'labels':{
          0: {'label':'0','fill':'white','align':'right'},
          50: {'label':'50M','fill':'white','align':'right'},
          100: {'label':'100M','fill':'white','align':'right'},
          150: {'label':'150M','fill':'white','align':'right'}
        }
      }
    },
  
    // Draw a key
    'key':{ 'show':true},
      
});

4. 绘制折线图。

example.draw();

5. 设置折线图的高度和宽度。

#example {
  height: 400px;
  width: 100%;
  animation-duration: 0.3s;
}

6. 向折线图中添加额外的数据系列。

varmaxtemp = [{x:1,y:6.4},{x:2,y:7},{x:3,y:9.1},{x:4,y:11.9},{x:5,y:14.8},{x:6,y:17.5},{x:7,y:19.6},{x:8,y:19},{x:9,y:16.9},{x:10,y:13.3},{x:11,y:9.1},{x:12,y:6.7}];
varmintemp = [{x:1,y:1.8},{x:2,y:1.4},{x:3,y:2.2},{x:4,y:3.9},{x:5,y:7},{x:6,y:9.9},{x:7,y:12.1},{x:8,y:12},{x:9,y:10.1},{x:10,y:7.6},{x:11,y:4.3},{x:12,y:2.2}];
  
example.addSeries(maxtemp,{
  'title': 'Max temperature',
  'points':{ 'size':4, 'color': '#FF6700'},
  'line':{ 'color': '#FF6700'},
  'tooltip':{ 'label': label }
});
  
example.addSeries(mintemp,{
  'title': 'Min temperature',
  'points':{ 'size':4, 'color': '#2254F4'},
  'line':{ 'color': '#2254F4'},
  'tooltip':{ 'label': label }
});



官方网站:https://github.com/odileeds/odi.linechart.js

相关热词: 折线图

下一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库