超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
2016-11-04 08:35
846 查看
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
效果预览
实例代码
效果预览
实例代码
<div class="htmleaf-container"> <div class="htmleaf-content"> <div style="width:30%;margin:0 auto;"> <div> <canvas id="canvas" height="450" width="600"></canvas> </div> </div> </div> </div> <script src="/api/jq/Chart/js/Chart.js"></script> <script> var randomScalingFactor = function() { return Math.round(Math.random() * 100) }; var lineChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] } ] } window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, { responsive: true }); } </script>
相关文章推荐
- 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案
- Chart.js – 效果精美的 HTML5 Canvas 图表库
- Aristochart – 灵活的 HTML5 Canvas 折线图
- Chart技巧1:自定义图表中的Pop-up提示
- 基于HTML5 Canvas的3D动态Chart图表
- html5--js函数在canvas中的应用
- html5学习canvas基本使用:div在js前面;localStorage存储根据浏览器在不同的位置;应用程序缓存;placeholder 属性提供一种提示(hint),描述输入域所期待的值。
- Chart.js | HTML5 图表绘制工具库(知识整理)
- 矢量Chart图表嵌入HTML5网络拓扑图的应用
- 图表 jschart && amcharts配置应用实例
- JS图表控件FusionCharts使用教程:自定义图表的工具提示
- Chart.js | HTML5 图表绘制工具库(知识整理)
- 利用canvas+Chart.js实现动态折线图
- Chart.js 轻量级HTML5图表绘制工具库(知识整理)
- 基于HTML5 Canvas的3D动态Chart图表
- chart.js + bootstrap +jquery.js 实现的 html5 图表绘制效果
- 矢量Chart图表嵌入HTML5网络拓扑图的应用
- Flex:在LineChart图表中创建一个自定义的LinearAxis函数标签(Tip提示)的例子
- 基于js和canvas的开源HTML5应用开发框架
- 分享一个超酷的开源html5 canvas互动网络图形效果javascript类库 - sigma.js