*YH*
- 浏览: 190442 次
- 性别:
- 来自: 广州
-
文章分类
最新评论
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.a{
background: #0bfefb;
}
</style>
</head>
<body>
<canvas id="chart" height="400" width="600" style="margin:50px"> 你的浏览器不支持HTML5 canvas </canvas>
<script type="text/javascript">
function goChart(dataArr){
// 声明所需变量
var canvas,ctx;
// 图表属性
var cWidth, cHeight, cMargin, cSpace;
var originX, originY;
// 折线图属性
var tobalDots, dotSpace, maxValue;
var totalYNomber;
// 运动相关变量
var ctr, numctr, speed;
// 获得canvas上下文
canvas = document.getElementById("chart");
if(canvas && canvas.getContext){
ctx = canvas.getContext("2d");
}
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawLineAnimate(); // 绘制折线图的动画
//点击刷新图表
canvas.onclick = function(){
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawLineAnimate(); // 绘制折线图的动画
};
// 图表初始化
function initChart(){
// 图表信息
cMargin = 60;
cSpace = 80;
/*这里是对高清屏幕的处理，
方法：先将canvas的width 和height设置成本来的两倍
然后将style.height 和 style.width设置成本来的宽高
这样相当于把两倍的东西缩放到原来的 1/2，这样在高清屏幕上 一个像素的位置就可以有两个像素的值
这样需要注意的是所有的宽高间距，文字大小等都得设置成原来的两倍才可以。
*/
canvas.width = Math.floor( (window.innerWidth-100)/2 ) * 2 ;
canvas.height = 740;
canvas.style.height = canvas.height/2 + "px";
canvas.style.width = canvas.width/2 + "px";
cHeight = canvas.height - cMargin - cSpace;
cWidth = canvas.width - cMargin - cSpace;
originX = cMargin + cSpace;
originY = cMargin + cHeight;
// 折线图信息
tobalDots = dataArr.length;
dotSpace = parseInt( cWidth/tobalDots );
maxValue = 0;
for(var i=0; i<dataArr.length; i++){
var dotVal = parseInt( dataArr[i][1] );
if( dotVal > maxValue ){
maxValue = dotVal;
}
}
maxValue += 50;
totalYNomber = 10;
// 运动相关
ctr = 1;
numctr = 100;
speed = 6;
ctx.translate(0.5,0.5); // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
}
// 绘制图表轴、标签和标记
function drawLineLabelMarkers(){
ctx.font = "24px Arial";
ctx.lineWidth = 2;
ctx.fillStyle = "#566a80";
ctx.strokeStyle = "#566a80";
// y轴
drawLine(originX, originY, originX, cMargin);
// x轴
drawLine(originX, originY, originX+cWidth, originY);
// 绘制标记
drawMarkers();
}
// 画线的方法
function drawLine(x, y, X, Y){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(X, Y);
ctx.stroke();
ctx.closePath();
}
// 绘制标记
function drawMarkers(){
ctx.strokeStyle = "#E0E0E0";
// 绘制 y 轴 及中间横线
var oneVal = parseInt(maxValue/totalYNomber);
ctx.textAlign = "right";
for(var i=0; i<=totalYNomber; i++){
var markerVal = i*oneVal;
var xMarker = originX-5;
var yMarker = parseInt( cHeight*(1-markerVal/maxValue) ) + cMargin;
ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 文字
if(i>0){
drawLine(originX+2, yMarker, originX+cWidth, yMarker);
}
}
// 绘制 x 轴 及中间竖线
ctx.textAlign = "center";
for(var i=0; i<tobalDots; i++){
var markerVal = dataArr[i][0];
var xMarker = originX+i*dotSpace;
var yMarker = originY+30;
ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
if(i>0){
drawLine(xMarker, originY-2, xMarker, cMargin );
}
}
// 绘制标题 y
ctx.save();
ctx.rotate(-Math.PI/2);
ctx.fillText("访问量", -canvas.height/2, cSpace-10);
ctx.restore();
// 绘制标题 x
ctx.fillText("月份", originX+cWidth/2, originY+cSpace/2+20);
};
//绘制折线图
function drawLineAnimate(){
ctx.strokeStyle = "#566a80"; //"#49FE79";
//连线
ctx.beginPath();
for(var i=0; i<tobalDots; i++){
var dotVal = dataArr[i][1];
var barH = parseInt( cHeight*dotVal/maxValue* ctr/numctr );//
var y = originY - barH;
var x = originX + dotSpace*i;
if(i==0){
ctx.moveTo( x, y );
}else{
ctx.lineTo( x, y );
}
}
ctx.stroke();
//背景
ctx.lineTo( originX+dotSpace*(tobalDots-1), originY);
ctx.lineTo( originX, originY);
//背景渐变色
//柱状图渐变色
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(133,171,212,0.6)');
gradient.addColorStop(1, 'rgba(133,171,212,0.1)');
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
ctx.fillStyle = "#566a80";
//绘制点
for(var i=0; i<tobalDots; i++){
var dotVal = dataArr[i][1];
var barH = parseInt( cHeight*dotVal/maxValue * ctr/numctr );
var y = originY - barH;
var x = originX + dotSpace*i;
drawArc( x, y ); //绘制点
ctx.fillText(parseInt(dotVal*ctr/numctr), x+15, y-8); // 文字
}
if(ctr<numctr){
ctr++;
setTimeout(function(){
ctx.clearRect(0,0,canvas.width, canvas.height);
drawLineLabelMarkers();
drawLineAnimate();
}, speed);
}
}
//绘制圆点
function drawArc( x, y, X, Y ){
ctx.beginPath();
ctx.arc( x, y, 3, 0, Math.PI*2 );
ctx.fill();
ctx.closePath();
}
}
var chartData = [["2017/01", 50], ["2017/02", 60], ["2017/03", 100], ["2017/04",200], ["2017/05",350], ["2017/06",600]];
goChart(chartData);
</script>
</body>
</html>
参考：https://www.cnblogs.com/chengduxiaoc/p/7678967.html
分享到：
发表评论
-
js在网页中查看pdf文件【转】
2019-07-29 15:59 364博主地址： https://www.cnblogs.com/d ... -
canvas__2 饼状图
2018-09-29 16:03 658<!DOCTYPE html> <ht ... -
canvas__1 柱状图
2018-09-28 14:44 546<!DOCTYPE html> <ht ... -
H5实现滑动切换图片功能
2018-08-28 11:29 4497页面代码 <!DOCTYPE HTML> & ... -
div实现table功能
2018-08-03 14:20 981div布局主要用到的css属性 table 此元素会作为 ...
相关推荐
3. **交互功能**：微信小程序中的canvas支持事件监听，比如tap事件，可以为折线图添加点击事件，当用户点击某个数据点时，显示详细信息或者触发其他操作。 4. **动态更新**：如果数据是实时变化的，可以使用wx....
本篇文章将详细探讨如何使用JavaScript与canvas API来封装一个自定义的折线图组件。 首先，我们需要理解`canvas`的基本结构。HTML5的`<canvas>`元素是一个可绘制图形的画布，通过JavaScript的`...
在Android开发中，Canvas是用于在屏幕上绘制图形的重要工具，它可以让我们实现自定义视图，包括绘制复杂的图表，如折线图。折线图是一种常见的数据可视化方式，它通过连接一系列点来展示数据的变化趋势。在这个名为...
"ztq_count_v3_java_天气折线_android_mightywfy_" 这个项目是关于如何在Android平台上使用原生的Canvas API来实现动态绘制天气类APP的图表，包括折线图、圆柱图和饼状图。这种技术对于那些不希望依赖第三方库或者...
本项目着重讲解如何使用Canvas来绘制动态折线图，这对于创建数据可视化应用尤其有用。动态折线图能够实时更新数据，呈现出流畅的变化效果。 首先，我们要理解Canvas的基本用法。Canvas对象是通过`onDraw()`方法在...
在创建折线图时，主要涉及以下Canvas API的使用： 1. `canvas`元素：HTML中的`<canvas>`标签定义了一个画布，是所有绘图操作的基础。 2. `getContext('2d')`：获取Canvas的2D渲染上下文，这是进行图形绘制的核心...
在Android开发中，Canvas是用于在屏幕上绘制图形的重要工具，它可以让我们实现自定义视图，包括绘制复杂的图表，如折线图。折线图是一种常用的数据可视化方式，它可以帮助我们直观地理解数据的变化趋势。本篇文章将...
本篇文章将详细介绍如何利用Canvas来绘制折线图，这是一种常见的数据可视化方法，适用于展示趋势或变化。 首先，我们需要创建一个自定义的View类，比如`LineChartView`，它继承自`View`。在这个类中，我们将重写`...
3. **坐标轴的绘制**：折线图由X轴、Y轴组成，它们定义了数据点的位置。我们需要在画布上先画出这两条轴，通常X轴水平，Y轴垂直。轴上的刻度线和标签也需绘制出来，以便于用户理解数据的数值范围。 4. **数据点的...
在这个折线图项目中，CSS可能用于设置Canvas的大小，以及图表的背景色、线条颜色、字体样式等视觉效果。 `image`文件夹可能包含了一些图标或者图形资源，这些图片可能被用作图表中的某些元素，比如指示箭头、按钮...
ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它可以很好地与Canvas结合使用，提供丰富的图表类型，如折线图、柱状图、饼图等。在Painter_Report中，ECharts可能被用来展示用户的绘画数据，例如统计...
清晰简洁的api，，文件不大，但功能完善；...带坐标，节点，鼠标接触节点的动态显示坐标的事件、、、至于传值方面、所用的方式是json格式（类似数组）,可以显示多个canvas图和每个图的多个颜色的折线、、、功能可谓完全
在这个“html5 canvas微信运动步数折线图代码”项目中，我们将探讨如何使用Canvas API来创建一个展示微信运动步数的动态折线图。 首先，我们需要了解Canvas的基本使用。Canvas是一个HTML元素，通过JavaScript来控制...
HTML5 Canvas微信运动折线图特效源码是一款基于HTML5 Canvas的微信运动折线图插件wcMotionChart的代码。这款插件是网友LipsonChan在工作过程中编写的。通过该插件你可以制作出某段时间内的动态折线图信息，非常有用...
通过JavaScript将数据转换为图形，可以实现折线图、柱状图、饼图等多种图表。 6. 交互性：`<canvas>`元素支持鼠标事件，如`click`、`mousemove`等，可以通过监听这些事件，实现用户与画布的交互，例如点击某部分...
"canvas-2:canvas 折线图"这个主题聚焦于如何利用Canvas API来创建折线图，这是一种常见的数据可视化方法，尤其适用于展示随时间变化的趋势。在这个项目中，我们将深入探讨Canvas API的基础知识以及构建折线图的具体...
2. HTML结构：在HTML中，创建一个`<canvas>`元素作为画布，JavaScript将在这个画布上绘制折线图。 3. JavaScript库：你可以选择使用现有的JavaScript图表库，如Chart.js、D3.js或者ECharts等。这些库提供了丰富的...
wcMotionChart是一款基于HTML5 Canvas的微信运动折线图jQuery插件。这款插件是网友LipsonChan在工作过程中编写的。通过该插件你可以制作出某段时间内的动态折线图信息，非常有用。
总的来说，"小程序echarts折线图示例"是一个关于如何在微信小程序中利用`ec-canvas`组件和ECharts库创建横向滚动折线图的教学资源。通过学习和实践这个示例，开发者可以掌握在小程序环境中实现复杂数据可视化的技能...
在Android开发中，折线图是一种常见的数据可视化方式，它能清晰地展示数据的变化趋势，广泛应用于统计、分析和监控等场景。本资料提供的是一个关于Android折线图的源码实现，包括了布局文件、自定义折线图类、...