JavaScript之Chart.js图例(legend)

#html

<div id="chart_line_legend" class="chart-legend"></div>
<canvas id="chart_line" height="80"></canvas>

#js

// render chart
var ctx = document.getElementById("chart_line").getContext("2d");
chartLine = new Chart(ctx).Line(lineData, lineOptions);
document.getElementById(‘chart_line_legend‘).innerHTML = chartLine.generateLegend();
时间: 2024-12-28 00:41:47

JavaScript之Chart.js图例(legend)的相关文章

Chart.js | HTML5 图表绘制工具库(知识整理、中文注释、中文文档)

Chart.js:用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上.基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k).值得推荐学习! GitHub源码: https://github.com/nnnick/Chart.js Chart.js文档:http://www.bootcss.com/p/chart.js/ 步骤: html部分: <canvas id="myChart&q

Salesforce Lightning组件中使用Chart.JS实现数据可视化

之前尝试过Google Chart来实现数据可视化(可以查看我之前的博客Google Chart 之 Area Chart案例),但是很遗憾,Google Chart是无法集成到Salesforce Lightning中的,理由嘛,Google JavaScript会跟Google通信,而且具有脚本的外部引用,但是Sales force的安全策略是不允许这样做的,据我所知,到目前为止是没有解决方法的,所以我们来学习下Chart.JS,这个开源的第三方JS库提供了交互式可视化组件,关键是,它是可以

Chart.js 学习笔记

1.引入Chart.js 文件 <script src="Chart.js"></script> 2.在html中创建画布 <canvas id="myChart" width="400" height="400"></canvas> 3.在js中实例化图表 var ctx = $("#myChart").get(0).getContext("2d&

13个JavaScript图表(JS图表)图形绘制插件【转】

现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容易就可以找到很多功能非常不错的图表库.个人而言,此类插件的上升,是因为: 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力更佳: 3. 绘制矢量图的不同技术愈发成熟:VML.SVG 和 Canvas. 当然了,你需要

chart.js图表库案例赏析,饼图添加文字

chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB. 前天用了一下,由于以前也稍微用过,今天总结了一下(水平有限,如果问题,请不吝赐教): 开发中文文档:http://www.bootcss.com/p/chart.js/docs/ ch

js 统计图插件chart.js

chart是一个纯js插件,它功能强大小巧使用也很简单. 第一步引入 chart.js . <script type="text/javascript" src="<%=path%>/js/mapping/Chart.js"></script> 第二步绘制控件 样式可以自己定义但是id不能改变 <canvas id="canvas"  height="600" width="

Chart.js报告

引进需要Chart.js <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <title>报表</title> <script src="js/Chart.js"></script> </head> <body> <l

Chart.js: 一个简单的 JS Chart Library

Chart.js 是一个 Open Source 的 JavaScript Chart Library.它一共有 6 中 Chart,全都是 HTML5 based. 底下是 Chart.js 所提供的 6 中 Charts的实例图形,包括了折线图.柱形图.圆饼图等,这样很容易在html网页中实现动态图的效果: Line Chart Bar Chart Radar Chart Pie Chart Polar Area Chart Doughnut Chart 快速上手 你可以到 github下载

13个JavaScript图表(JS图表)图形绘制插件

现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容易就可以找到很多功能非常不错的图表库.个人而言,此类插件的上升,是因为: 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力更佳: 3. 绘制矢量图的不同技术愈发成熟:VML.SVG 和 Canvas. 当然了,你需要