js 手工绘制一个图表（自定义chart），

Achilles 发布于2019-08-30 14:11 / 3000人阅读

摘要：最终效果说明一提到图表第一反应就是，但是这次需求不一样，就要求展示一个简单的折线图，没必要搞那么大。简单的用了一下的基础的那几个函数就实现了。我认为只要沿着这条思路走，就可以绘制出你想要的任何图表。

1、最终效果

2、说明
一提到图表第一反应就是echart，但是这次需求不一样，就要求展示一个简单的折线图，没必要搞那么大。决定canvas走起。这里展示一下思路，代码也比较简单，如果需要，欢迎加入我的qq群点此入群，或者438863673
3、上代码

new Vue({
            el:".container",
            data (){
                return {
                    yuce:[30,40,24,23,45,18,16,24,12,33,42,20,10, 20, 24, 23, 45, 25, 22, 24, 12, 33,31, 20,36]
                }
            },
            mounted () {
                var c = document.getElementById("ctx");
                var ctx = c.getContext("2d");
                ctx.strokeStyle = "rgba(255,255,255,0.1)";
                ctx.width= 2410;
                ctx.height= 100;
                ctx.font = "";
                var width = 100;
                var i = 0;
                ctx.moveTo(0,60- this.yuce[0]);
               do{
                    ctx.lineTo(width, 60-this.yuce[i+1]);
                    ctx.fillStyle = "#aaa"
                    ctx.fillText(i+"°/88%", width-65, 60 - (this.yuce[i]+ this.yuce[i+1])/2);
                    i++;
                    width = width + 100
                } while (i <24)
                ctx.lineTo(2400, 80);
                ctx.lineTo(0, 80);
                ctx.lineTo(0, 60 - this.yuce[0]);
                ctx.fillStyle = "rgba(100, 150, 185, 0.5)";
                ctx.strokeStyle = "rgba(47, 161, 255, 1)";
                ctx.width=1;
                ctx.fill();
                ctx.stroke(); 
            } 
        })

4、代码分析
上面的代码是绘制线框所需要的,因为数据比较长所以设置了横向可滑动。简单的用了一下canvas的基础的那几个函数就实现了。我认为只要沿着这条思路走，就可以绘制出你想要的任何图表。代码是vue项目里copy出来。思路简单，应该都看得懂。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115837.html

js 手工绘制一个图表（自定义chart），

摘要：最终效果说明一提到图表第一反应就是，但是这次需求不一样，就要求展示一个简单的折线图，没必要搞那么大。简单的用了一下的基础的那几个函数就实现了。我认为只要沿着这条思路走，就可以绘制出你想要的任何图表。 1、最终效果showImg(https://segmentfault.com/img/bV6j5f?w=384&h=203); 2、说明一提到图表第一反应就是echart，但是这次需求不一...

SnaiLiu 2019-08-22 15:33 评论0 收藏0
前端开发者常用的9个JavaScript图表库

摘要：使用来呈现图表。允许用户在应用程序中创建美观的可复用的图表。它是基于创建的，是一个以数据为中心的图表库，可以改进数据可视化的效果。非常轻巧，并使用元素来创建很奇特的图表。是库中较为古老的图表库之一。总结以上介绍的库都是高质量的图表库。当前，数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据，都需要经过适当的可视化处理，以便更好的呈现给用户读取和分析。对任何一个...

luck 2019-08-22 11:21 评论0 收藏0
蚂蚁金服新一代数据可视化引擎 G2

摘要：新公司已经呆了一个多月，目前着手一个数据可视化的项目，数据可视化肯定要用到图形库如等，经决定我的这个项目用阿里旗下蚂蚁金服所开发的图表库。数据提示框内提示的信息还可以通过格式化函数动态指定。新公司已经呆了一个多月，目前着手一个数据可视化的项目，数据可视化肯定要用到图形库如D3、Highcharts、ECharts、Chart等，经决定我的这个项目用阿里旗下蚂蚁金服所开发的G2图表库。...

animabear 2019-08-20 16:32 评论0 收藏0
chart.js 中文文档翻译

摘要：高亮最近的元素高亮同样值的数据高亮所有的数据原色，当鼠标悬浮到块是值被选中。关键字代表的是从构造函数创建的对象。高亮最近的数据悬浮时动画执行的时间，单位，毫秒调用被触发的任何事件动画设置以下动画设置都可生效，全局设置在中定义。 chart.js Configuration文档翻译 tags: chart 文档翻译 [TOC] Getting start开始下载 github上获得最...

y1chuan 2019-08-20 14:38 评论0 收藏0