chart.js画图

最近需要使用chart.js画图来显示数据，发现chart.js的效果很不错，很方便的可以画出柱状图或者饼图，当时需求准备画出一个doughnut图，并实现周围有相应颜色的提示栏，鼠标放置上去会有提示效果出现。

<div>
<canvas id = "canvas"></canvas>
</div>

<div id = "legend"></div>
<script>
var data = [
{
value: 300,
color: "#fdd",
label: "red"
},
{
value: 50,
color: "#435",
label: "yellow"
}
];
var helpers = Chart.helpers;
var ctx = document.getElementById("canvas").getContext("2d");
var myDoughnutChart = new Chart(ctx).Doughnut(
data,{
animateRotate: true
});
var legendHolder = document.getElementById("legend");
legendHolder.innerHTML = myDoughnutChart.generateLegend();
helpers.each(legendHolder.firstChild.childNodes,function(legendNode,index){
var activeSegment = myDoughnutChart.segments[index];
activeSegment.save();
myDoughnutChart.showTooltip([activeSegment]);
activeSegment.restore();
});
helpers.addEvent(legendNode,'click',function(){
var activeSegment1 = myDoughnutChart.segments[index];
alert(activeSegment1.value);
});
});
helpers.addEvent(legendHolder.firstChild,'mouseout',function(){
myDoughnutChart.draw();
});
myDoughnutChart.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
</script>

chart.js画图相关推荐

Chart.js清空canvas画布 clearRect()等canvas方法擦除失败（附完整代码）
Chart.js清空canvas画布 clearRect等canvas方法擦除失败一.直接移除DOM对象方式原因方法二.完整代码 html javascript chart.js画图方法三. ...
Chart.js使用
下载chart.js,直接放到你的网页里: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js 首先你要在页面里有个标 ...
Rails-treasure chest4: 使用图表对资料进行分析chart.js(及其他)；管理用户权限的gem 'Pumdit'(6000)...
* 多档案上传 * 图表资料分析 Chartkick gem或者 chart.js * 用户权限控管 gem Pundit (6000✨) * HTML E-mail 寄送 : gem prema ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
java 实现雷达图,如何使用y轴为0到100的chart.js创建雷达图？
我目前正在使用Chart.js将我的数据显示为雷达图 . 我面临的问题是,每次我向页面添加数据时,它都会将最大值设置为表中最高值 . 我需要它从0到100的Y轴开始 . 我正在使用Chart.js v ...
JS组件系列——开源免费图表组件：Chart.js
前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...
Vue——vue-chartjs[Vue 对于 Chart.js 的封装]
基本概念 vue-chartjs:vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart ...
python 图表 web_Web | Django 与 Chart.js 联用做出精美的图表
class Country(models.Model):name = models.CharField(max_length=30)class City(models.Model):name = mo ...
chart.js绘制精美的数据化图形--入门示例
参考:http://think.zvan.com.cn/code/js/2014/0607/247.html 这个库基于html5,在360极速浏览器和firefox中测试通过. <html&g ...

chart.js画图

chart.js画图相关推荐

最新文章

热门文章