HTML5画布MeteorCharts折线图

最新推荐文章于 2021-06-21 12:02:58 发布

limeiyans

最新推荐文章于 2021-06-21 12:02:58 发布

阅读量1k

点赞数

分类专栏： HTML5画布MeteorCharts折线图文章标签： HTML5画布MeteorCharts折

本文链接：https://blog.csdn.net/limeiyans/article/details/20542255

版权

HTML5画布MeteorCharts折线图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建一个HTML5画布与MeteorCharts折线图,我们可以实例化一个MeteorCharts。行对象容器DOM元素,一个模型配置,和一个视图配置。模型配置包含所有数据的图表,如标题和系列,和视图包含所有的样式,如图表大小、背景颜色和文本颜色。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/mc/js/lib/meteorcharts-v0.0.11.min.js"></script>
    <script defer="defer"> 
      var secondsInYear = 60 * 60 * 24 * 365;
      
      // model configuration (data)
      var model = {
        title: 'Example Chart', 
        series: [{
          title: 'Line 1',
          points: [
            {x: secondsInYear * 0, y: 7.0},
            {x: secondsInYear * 1, y: 6.9},
            {x: secondsInYear * 2, y: 9.5},
            {x: secondsInYear * 3, y: 14.5},
            {x: secondsInYear * 4, y: 18.2},
            {x: secondsInYear * 5, y: 21.5},
            {x: secondsInYear * 6, y: 25.2},
            {x: secondsInYear * 7, y: 26.5},
            {x: secondsInYear * 8, y: 23.3},
            {x: secondsInYear * 9, y: 18.3},
            {x: secondsInYear * 10, y: 13.9},
            {x: secondsInYear * 11, y: 9.6}
          ] 
        },
        {
          title: 'Line 2',
          points: [
            {x: secondsInYear * 0, y: -0.2},
            {x: secondsInYear * 1, y: 0.8}, 
            {x: secondsInYear * 2, y: 5.7},
            {x: secondsInYear * 3, y: 11.3},
            {x: secondsInYear * 4, y: 17.0},
            {x: secondsInYear * 5, y: 22.0},
            {x: secondsInYear * 6, y: 24.8},
            {x: secondsInYear * 7, y: 24.1},
            {x: secondsInYear * 8, y: 20.1},
            {x: secondsInYear * 9, y: 14.1},
            {x: secondsInYear * 10, y: 8.6},
            {x: secondsInYear * 11, y: 2.5}
          ] 
        }]
      };
      
      // view configuration (styling)
      var view = {
        width: 580,
        height: 300
      };

      // line charts are instantiated with a container DOM element,
      // a model, and a view
      var lineChart = new MeteorCharts.Line({
        container: 'container',
        model: model,
        view: view
      });
    </script>
  </body>
</html>

limeiyans

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布MeteorCharts折线图

创建一个HTML5画布与MeteorCharts折线图,我们可以实例化一个MeteorCharts。行对象容器DOM元素,一个模型配置,和一个视图配置。模型配置包含所有数据的图表,如标题和系列,和视图包含所有的样式,如图表大小、背景颜色和文本颜色。 body { margin: 0px; padding: 0px; }
复制链接

扫一扫