html5实现饼图和线图
html5实现饼图和线图-我们到底能走多远系列(34)
我们到底能走多远系列(34)
扯淡:
送给各位一段话:

- function lineChart(data){
- var xPadding = 60;//x轴离边框的距离
- var yPadding = 50;//y轴离边框的距离
- var canvasWidth;
- var canvasHeight;
- var xAxisLength; //x轴长度
- var yAxisLength; //y轴长度
- var xTextColour = "#000000"; // x轴字体颜色
- var yTextColour = "#000000"; // y轴字体颜色
- var dotsColour = "#183487"; // 图标点的颜色
- var lineWidth = 2 //线宽度
- var lineColour = "#194E9C"; // 线颜色
- var lineShadowColour = "rgba( 0, 0, 0, .5 )"; // 线阴影颜色
- var lineShadowBlur = 15;
- var lineShadowOffsetX = 3;
- var lineShadowOffsetY = 3;
- var xyColour = "#4B0082"; //xy轴颜色
- var xToTextlength = 20; //x轴和文字的间距
- var yToTextlength = 10; //y轴和文字的间距
- var yTextNum = 6; //y轴和文字数量
- var chartLineFont = "bold 16px 'Trebuchet MS', Verdana, sans-serif";// xy轴字体
- var chooseDotTextFont = "bold 16px 'Trebuchet MS', Verdana, sans-serif";//显示提示字体
- var dotsToDotsXLength; //x轴间距
- var dotsXArray = [];
- var divideXArray = []; //分割每个点的竖切线的x坐标
- var lineChart; // The canvas element in the page
- init(data);
- function init(data){
- lineChart = document.getElementById('lineChart');
- // Initialise some properties of the canvas and chart
- canvasWidth = lineChart.width;
- canvasHeight = lineChart.height;
- xAxisLength = canvasWidth - 2*xPadding;
- yAxisLength = canvasHeight - 2*yPadding;
- dotsToDotsXLength = xAxisLength / data.length;
- drawLineChart();
- // 添加事件
- $('#lineChart').mousemove(handleDotsMousemoveEvent);
- }
- function drawLineChart(index){
- var c = lineChart.getContext('2d');
- // Clear the canvas, ready for the new frame
- c.clearRect ( 0, 0, canvasWidth, canvasHeight );
- c.lineWidth = lineWidth;
- c.strokeStyle = xyColour;
- // Draw the axises
- c.beginPath();
- c.moveTo(xPadding, yPadding);
- // y轴
- c.lineTo(xPadding, lineChart.height - yPadding);
- // x轴
- c.lineTo(lineChart.width - yPadding, lineChart.height - yPadding);
- c.stroke();
- // Draw the the background line
- c.beginPath();
- c.strokeStyle = '#D9D6D6';
- for(var i = 0; i <= getMaxYPoint(getMaxY()); i += getYSpace()) {
- if(i != 0){
- c.moveTo(xPadding + 2, getYPixel(i));
- c.lineTo(xPadding + xAxisLength + 2, getYPixel(i));
- }
- }
- c.stroke();
- // Draw the X value texts
- c.font = chartLineFont;
- c.fillStyle = xTextColour;
- c.textAlign = "center";
- var step = parseInt(data.length/yTextNum);
- for(var i = 0; i < data.length; i =i + step) {
- c.fillText(data[i].X, getXPixel(i), lineChart.height - yPadding + xToTextlength);
- }
- // Draw the Y value texts
- c.textAlign = "right";
- c.textBaseline = "middle";
- c.fillStyle = yTextColour;
- for(var i = 0; i <= getMaxYPoint(getMaxY()); i += getYSpace()) {
- c.fillText(formatNum(i), xPadding - yToTextlength, getYPixel(i));
- }
- // Draw the line graph
- drawLineAndDots(c, index);
- }
- /**
- * 画线
- * @param c
- * @param index
- */
- function drawLineAndDots(c, index){
- c.beginPath();
- c.strokeStyle = lineColour;
- c.moveTo(getXPixel(0), getYPixel(data[0].value));
- for(var i = 1; i < data.length; i ++) {
- // 使用直线
- //c.lineTo(getXPixel(i), getYPixel(data[i].value));
- //var cps = getControlPoints(getXPixel(i-1),getYPixel(data[i-1].value),getXPixel(i),getYPixel(data[i].value));
- //为了更美观一点 使用了弯曲的线
- c.bezierCurveTo(getXPixel(i-1)+9,getYPixel(data[i-1].value)+9,getXPixel(i)-9,getYPixel(data[i].value)-9,getXPixel(i), getYPixel(data[i].value))
- /**
- // 线的阴影部分
- c.shadowBlur = lineShadowBlur;
- c.shadowOffsetX = lineShadowOffsetX;
- c.shadowOffsetY = lineShadowOffsetY;
- c.shadowColor = lineShadowColour;
- **/
- }
- c.stroke();
- c.shadowColor = "rgba( 0, 0, 0, 0 )";
- c.closePath();
- // Draw the dots
- c.fillStyle = dotsColour;
- for(var i = 0; i < data.length; i ++) {
- // 有点中的节点
- if(i == index){
- c.beginPath();
- c.arc(getXPixel(i), getYPixel(data[i].value), 8, 0, Math.PI * 2, true);
- c.fill();
- c.textAlign = "center";
- c.font = chooseDotTextFont;
- c.fillText(data[i].X, xAxisLength + xPadding + 5 , 20 )
- c.fillText(data[i].value, xAxisLength + xPadding + 5 , 40 )
- }else{
- c.beginPath();
- c.arc(getXPixel(i), getYPixel(data[i].value), 4, 0, Math.PI * 2, true);
- c.fill();
- }
- divideXArray[i] = getXPixel(i) + dotsToDotsXLength/2;
- }
- }
- function getMaxY() {
- var max = 0;
- for(var i = 0; i < data.length; i ++) {
- if(data[i].value > max) {
- max = data[i].value;
- }
- }
- max += 10 - max % 10;
- return max;
- }
- /**
- * 计算x轴间距
- * @param val
- * @returns {number}
- */
- function getXPixel(val) {
- return (dotsToDotsXLength) * val + (xPadding * 1.5);
- }
- /**
- * 计算y轴间距
- * @param val
- * @returns {number}
- */
- function getYPixel(val) {
- return lineChart.height - ((yAxisLength / getMaxYPoint(getMaxY())) * val) - yPadding;
- }
- /**
- * 计算Y轴显示最大值
- * 输入1234 输出2000
- * @param maxY
- */
- function getMaxYPoint(maxY){
- var firstDigit = parseInt((maxY + '').substring(0,1)) + 1;
- var digitNum = parseInt((maxY+"").length);
- for(var i = 1; i<digitNum; i++){
- firstDigit = firstDigit *10
- }
- return firstDigit;
- }
- /**
- * 计算Y轴坐标增加数量
- * @returns {number}
- */
- function getYSpace(){
- return getMaxYPoint(getMaxY())/5;
- }
- /**
- * 格式化:三位数字加逗号
- * @param num
- * @returns {*}
- */
- function formatNum(num){
- if(!/^(\+|-)?\d+(\.\d+)?$/.test(num)){
- alert("wrong!");
- return num;
- }
- var re = new RegExp();
- re.compile("(\\d)(\\d{3})(,|\\.|$)");
- num += "";
- while(re.test(num)){
- num = num.replace(re, "$1,$2$3")
- }
- return num;
- }
- //鼠标事件
- function handleDotsMousemoveEvent(mousemoveEvent){
- //取得鼠标位置
- var mouseX = mousemoveEvent.pageX - this.offsetLeft;
- var dot = 0;
- if(0 < mouseX && mouseX< xPadding){
- return;
- }
- if((xPadding + xAxisLength) < mouseX){
- return;
- }
- for(var i=0; i<divideXArray.length; i++){
- if(mouseX < divideXArray[i]){
- dot = i;
- break;
- }
- }
- drawLineChart(dot);
- }
- }

修改后的代码:(直接保存html文件即可)

- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Pie Chart with HTML5 and jQuery - 1.0</title>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
- <style>
- body {
- background: #fff;
- color: #333;
- font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
- font-size: 0.9em;
- padding: 40px;
- }
- #container {
- width: 900px;
- margin: 0 auto;
- }
- .chart, .chartData {
- border: 1px solid #333;
- background: #ebedf2 url("images/gradient.png") repeat-x 0 0;
- }
- .chart {
- display: block;
- margin: 0 0 50px 0;
- float: left;
- cursor: pointer;
- }
- .chartData {
- width: 200px;
- margin: 0 40px 0 0;
- float: right;
- border-collapse: collapse;
- box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
- -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
- -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
- background-position: 0 -100px;
- }
- .chartData th, .chartData td {
- padding: 0.5em;
- border: 1px dotted #666;
- text-align: left;
- }
- .chartData th {
- border-bottom: 2px solid #333;
- text-transform: uppercase;
- }
- .chartData td {
- cursor: pointer;
- }
- .chartData td.highlight {
- background: #e8e8e8;
- }
- .chartData tr:hover td {
- background: #f0f0f0;
- }
- </style>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <!--[if IE]>
- <script src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
- <![endif]-->
- </head>
- <body>
- <div id="container">
- <canvas id="chart" width="600" height="500" class="chart"></canvas>
- <table id="chartData" class="chartData">
- <tr><th>Widget</th><th>Sales ($)</th><th>prcent (%)</th></tr>
- </table>
- </div>
- </body>
- </html>
- <script>
- var data=[{label:"SuperWidget",value:1862.12},{label:"MegaWidget1",value:1316.00},{label:"redasd",value:1300.00},{label:"hope",value:300.00},{label:"hack",value:300.00},{label:"MegaWidget",value:1316.00},{label:"redasd",value:1300.00},{label:"hope",value:300.00},{label:"hack",value:300.00}];
- // Run the code when the DOM is ready
- //$( pieChart );
- pieChart(data, 'chart', 'chartData');
- function pieChart(data, chartElementId, chartTableElementId) {
- // Config settings
- var chartSizePercent = 55; // The chart radius relative to the canvas width/height (in percent)
- var sliceBorderWidth = 1; // Width (in pixels) of the border around each slice
- var sliceBorderStyle = "#fff"; // Colour of the border around each slice
- var sliceGradientColour = "#ddd"; // Colour to use for one end of the chart gradient
- var maxPullOutDistance = 25; // How far, in pixels, to pull slices out when clicked
- var pullOutFrameStep = 4; // How many pixels to move a slice with each animation frame
- var pullOutFrameInterval = 40; // How long (in ms) between each animation frame
- var pullOutLabelPadding = 65; // Padding between pulled-out slice and its label
- var pullOutLabelFont = "bold 16px 'Trebuchet MS', Verdana, sans-serif"; // Pull-out slice label font
- var pullOutValueFont = "bold 12px 'Trebuchet MS', Verdana, sans-serif"; // Pull-out slice value font
- var pullOutValuePrefix = ""; // Pull-out slice value prefix
- var pullOutShadowColour = "rgba( 0, 0, 0, .5 )"; // Colour to use for the pull-out slice shadow
- var pullOutShadowOffsetX = 5; // X-offset (in pixels) of the pull-out slice shadow
- var pullOutShadowOffsetY = 5; // Y-offset (in pixels) of the pull-out slice shadow
- var pullOutShadowBlur = 5; // How much to blur the pull-out slice shadow
- var pullOutBorderWidth = 2; // Width (in pixels) of the pull-out slice border
- var pullOutBorderStyle = "#333"; // Colour of the pull-out slice border
- var chartStartAngle = -.5 * Math.PI; // Start the chart at 12 o'clock instead of 3 o'clock
- // Declare some variables for the chart
- var canvas; // The canvas element in the page
- var currentPullOutSlice = -1; // The slice currently pulled out (-1 = no slice)
- var currentPullOutDistance = 0; // How many pixels the pulled-out slice is currently pulled out in the animation
- var animationId = 0; // Tracks the interval ID for the animation created by setInterval()
- var chartData = data; // Chart data (labels, values, and angles)
- var chartColours = []; // Chart colours (pulled from the HTML table)
- var totalValue = 0; // Total of all the values in the chart
- var canvasWidth; // Width of the canvas, in pixels
- var canvasHeight; // Height of the canvas, in pixels
- var centreX; // X-coordinate of centre of the canvas/chart
- var centreY; // Y-coordinate of centre of the canvas/chart
- var chartRadius; // Radius of the pie chart, in pixels
- var chartElementId = chartElementId; // 圆饼元素id
- var chartTableElementId = chartTableElementId; // 数据表格元素id
- // Set things up and draw the chart
- init();
- /**
- * Set up the chart data and colours, as well as the chart and table click handlers,
- * and draw the initial pie chart
- */
- function init() {
- var colors=['#FF4500','#0DA068','#194E9C','#ED9C13','#ED5713','#CD00CD','#7A378B','#B8860B','#8B2500','#9932CC','#5F91DC','#F88E5D','#0000FF','#B3EE3A','#7A378B','#FF1493','#F5DA81','#80FF00','#173B0B','#0B3B39','#0B0B3B','#A901DB','#6E6E6E','#5F04B4','#01DFD7','#A31A1A','#1A653C','#A49D0C','#790CA4','#CA80E8','#6E87D7','#D76ED2','#D7B86E','#49543B','#9EEBE8','#9ED9EB','#549B21']
- // Get the canvas element in the page
- canvas = document.getElementById(chartElementId);
- // Exit if the browser isn't canvas-capable
- if ( typeof canvas.getContext === 'undefined' ) return;
- // Initialise some properties of the canvas and chart
- canvasWidth = canvas.width;
- canvasHeight = canvas.height;
- centreX = canvasWidth / 2;
- centreY = canvasHeight / 2;
- chartRadius = Math.min( canvasWidth, canvasHeight ) / 2 * ( chartSizePercent / 100 );
- // Grab the data from the table,
- // and assign click handlers to the table data cells
- var currentRow = 0;
- var currentCell = 0;
- //$('#chartData').append('<tr><th>Widget</th><th>Sales ($)</th><th>prcent (%)</th></tr>')
- $.each(chartData, function(index,value){
- totalValue += value.value;
- });
- $.each(chartData, function(index,value){
- $('#'+chartTableElementId).append('<tr style="color: '+colors[index]+'"><td>'+value.label+'</td><td>'+value.value+'</td><td>'+ ( value.value / totalValue * 100 + .5 ).toFixed(2) + '%'+'</td></tr>')
- });
- $('#'+chartTableElementId+' td').each( function() {
- currentCell++;
- // Store the slice index in this cell, and attach a click handler to it
- $(this).data( 'slice', currentRow );
- $(this).click( handleTableClick );
- // Extract and store the cell colour
- if ( rgb = $(this).css('color').match( /rgb\((\d+), (\d+), (\d+)/) ) {
- chartColours[currentRow] = [ rgb[1], rgb[2], rgb[3] ];
- } else if ( hex = $(this).css('color').match(/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/) ) {
- chartColours[currentRow] = [ parseInt(hex[1],16) ,parseInt(hex[2],16), parseInt(hex[3], 16) ];
- } else {
- alert( "Error: Colour could not be determined! Please specify table colours using the format '#xxxxxx'" );
- return;
- }
- if(currentCell % 3 == 0){
- currentRow++;
- }
- } );
- // Now compute and store the start and end angles of each slice in the chart data
- var currentPos = 0; // The current position of the slice in the pie (from 0 to 1)
- for ( var slice in chartData ) {
- chartData[slice]['startAngle'] = 2 * Math.PI * currentPos;
- chartData[slice]['endAngle'] = 2 * Math.PI * ( currentPos + ( chartData[slice]['value'] / totalValue ) );
- currentPos += chartData[slice]['value'] / totalValue;
- }
- // All ready! Now draw the pie chart, and add the click handler to it
- drawChart();
- $('#'+chartElementId).click ( handleChartClick );
- }
- /**
- * Process mouse clicks in the chart area.
- *
- * If a slice was clicked, toggle it in or out.
- * If the user clicked outside the pie, push any slices back in.
- *
- * @param Event The click event
- */
- function handleChartClick ( clickEvent ) {
- // Get the mouse cursor position at the time of the click, relative to the canvas
- var mouseX = clickEvent.pageX - this.offsetLeft;
- var mouseY = clickEvent.pageY - this.offsetTop;
- // Was the click inside the pie chart?
- var xFromCentre = mouseX - centreX;
- var yFromCentre = mouseY - centreY;
- var distanceFromCentre = Math.sqrt( Math.pow( Math.abs( xFromCentre ), 2 ) + Math.pow( Math.abs( yFromCentre ), 2 ) );
- if ( distanceFromCentre <= chartRadius ) {
- // Yes, the click was inside the chart.
- // Find the slice that was clicked by comparing angles relative to the chart centre.
- var clickAngle = Math.atan2( yFromCentre, xFromCentre ) - chartStartAngle;
- if ( clickAngle < 0 ) clickAngle = 2 * Math.PI + clickAngle;
- for ( var slice in chartData ) {
- if ( clickAngle >= chartData[slice]['startAngle'] && clickAngle <= chartData[slice]['endAngle'] ) {
- // Slice found. Pull it out or push it in, as required.
- toggleSlice ( slice );
- return;
- }
- }
- }
- // User must have clicked outside the pie. Push any pulled-out slice back in.
- pushIn();
- }
- /**
- * Process mouse clicks in the table area.
- *
- * Retrieve the slice number from the jQuery data stored in the
- * clicked table cell, then toggle the slice
- *
- * @param Event The click event
- */
- function handleTableClick ( clickEvent ) {
- var slice = $(this).data('slice');
- toggleSlice ( slice );
- }
- /**
- * Push a slice in or out.
- *
- * If it's already pulled out, push it in. Otherwise, pull it out.
- *
- * @param Number The slice index (between 0 and the number of slices - 1)
- */
- function toggleSlice ( slice ) {
- if ( slice == currentPullOutSlice ) {
- pushIn();
- } else {
- startPullOut ( slice );
- }
- }
- /**
- * Start pulling a slice out from the pie.
- *
- * @param Number The slice index (between 0 and the number of slices - 1)
- */
- function startPullOut ( slice ) {
- // Exit if we're already pulling out this slice
- if ( currentPullOutSlice == slice ) return;
- // Record the slice that we're pulling out, clear any previous animation, then start the animation
- currentPullOutSlice = slice;
- currentPullOutDistance = 0;
- clearInterval( animationId );
- animationId = setInterval( function() { animatePullOut( slice ); }, pullOutFrameInterval );
- // Highlight the corresponding row in the key table
- $('#'+chartTableElementId+' td').removeClass('highlight');
- var labelCell = $('#'+chartTableElementId+' td:eq(' + (slice*3) + ')');
- var valueCell = $('#'+chartTableElementId+' td:eq(' + (slice*3+1) + ')');
- var prcentCell = $('#'+chartTableElementId+' td:eq(' + (slice*3+2) + ')');
- labelCell.addClass('highlight');
- valueCell.addClass('highlight');
- prcentCell.addClass('highlight');
- }
- /**
- * Draw a frame of the pull-out animation.
- *
- * @param Number The index of the slice being pulled out
- */
- function animatePullOut ( slice ) {
- // Pull the slice out some more
- currentPullOutDistance += pullOutFrameStep;
- // If we've pulled it right out, stop animating
- if ( currentPullOutDistance >= maxPullOutDistance ) {
- clearInterval( animationId );
- return;
- }
- // Draw the frame
- drawChart();
- }
- /**
- * Push any pulled-out slice back in.
- *
- * Resets the animation variables and redraws the chart.
- * Also un-highlights all rows in the table.
- */
- function pushIn() {
- currentPullOutSlice = -1;
- currentPullOutDistance = 0;
- clearInterval( animationId );
- drawChart();
- $('#'+chartTableElementId+' td').removeClass('highlight');
- }
- /**
- * Draw the chart.
- *
- * Loop through each slice of the pie, and draw it.
- */
- function drawChart() {
- // Get a drawing context
- var context = canvas.getContext('2d');
- // Clear the canvas, ready for the new frame
- context.clearRect ( 0, 0, canvasWidth, canvasHeight );
- // Draw each slice of the chart, skipping the pull-out slice (if any)
- for ( var slice in chartData ) {
- if ( slice != currentPullOutSlice ) drawSlice( context, slice );
- }
- // If there's a pull-out slice in effect, draw it.
- // (We draw the pull-out slice last so its drop shadow doesn't get painted over.)
- if ( currentPullOutSlice != -1 ) drawSlice( context, currentPullOutSlice );
- }
- /**
- * Draw an individual slice in the chart.
- *
- * @param Context A canvas context to draw on
- * @param Number The index of the slice to draw
- */
- function drawSlice ( context, slice ) {
- // Compute the adjusted start and end angles for the slice
- var startAngle = chartData[slice]['startAngle'] + chartStartAngle;
- var endAngle = chartData[slice]['endAngle'] + chartStartAngle;
- if ( slice == currentPullOutSlice ) {
- // We're pulling (or have pulled) this slice out.
- // Offset it from the pie centre, draw the text label,
- // and add a drop shadow.
- var midAngle = (startAngle + endAngle) / 2;
- var actualPullOutDistance = currentPullOutDistance * easeOut( currentPullOutDistance/maxPullOutDistance, .8 );
- startX = centreX + Math.cos(midAngle) * actualPullOutDistance;
- startY = centreY + Math.sin(midAngle) * actualPullOutDistance;
- context.fillStyle = 'rgb(' + chartColours[slice].join(',') + ')';
- context.textAlign = "center";
- context.font = pullOutLabelFont;
- context.fillText( chartData[slice]['label'], centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ), centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) );
- context.font = pullOutValueFont;
- context.fillText( pullOutValuePrefix + chartData[slice]['value'] + " (" + ( chartData[slice]['value'] / totalValue * 100 + .5 ).toFixed(2) + "%)", centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ), centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) + 20 );
- context.shadowOffsetX = pullOutShadowOffsetX;
- context.shadowOffsetY = pullOutShadowOffsetY;
- context.shadowBlur = pullOutShadowBlur;
- } else {
- // This slice isn't pulled out, so draw it from the pie centre
- startX = centreX;
- startY = centreY;
- }
- // Set up the gradient fill for the slice
- var sliceGradient = context.createLinearGradient( 0, 0, canvasWidth*.75, canvasHeight*.75 );
- sliceGradient.addColorStop( 0, sliceGradientColour );
- sliceGradient.addColorStop( 1, 'rgb(' + chartColours[slice].join(',') + ')' );
- // Draw the slice
- context.beginPath();
- context.moveTo( startX, startY );
- context.arc( startX, startY, chartRadius, startAngle, endAngle, false );
- context.lineTo( startX, startY );
- context.closePath();
- context.fillStyle = sliceGradient;
- context.shadowColor = ( slice == currentPullOutSlice ) ? pullOutShadowColour : "rgba( 0, 0, 0, 0 )";
- context.fill();
- context.shadowColor = "rgba( 0, 0, 0, 0 )";
- // Style the slice border appropriately
- if ( slice == currentPullOutSlice ) {
- context.lineWidth = pullOutBorderWidth;
- context.strokeStyle = pullOutBorderStyle;
- } else {
- context.lineWidth = sliceBorderWidth;
- context.strokeStyle = sliceBorderStyle;
- }
- // Draw the slice border
- context.stroke();
- }
- /**
- * Easing function.
- *
- *
- * @param Number The ratio of the current distance travelled to the maximum distance
- * @param Number The power (higher numbers = more gradual easing)
- * @return Number The new ratio
- */
- function easeOut( ratio, power ) {
- return ( Math.pow ( 1 - ratio, power ) + 1 );
- }
- };
- </script>

总结:
让我们继续前行
----------------------------------------------------------------------
努力不一定成功,但不努力肯定不会成功。
共勉。
html5实现饼图和线图的更多相关文章
- html5实现饼图和线图-我们到底能走多远系列(34)
我们到底能走多远系列(34) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 礼仪规范 再到赚取世间的名声 财富 地位 ...
- 推荐几款web站点JS(JQeury)图表(饼图,柱图,线图)
一 Google Chart Tools 官网:https://developers.google.com/chart/ 谷歌图表工具提供了一个完美的方式形象化您的网站上的数据.从简单到复杂的层次结构 ...
- canvas绘图,html5 k线图,股票行情图
canvas绘图,html5 k线图,股票行情图 canvas跟其他标签一样,也可以通过css来定义样式.但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canva ...
- Matplotlib数据可视化(6):饼图与箱线图
In [1]: from matplotlib import pyplot as plt import numpy as np import matplotlib as mpl mpl.rcParam ...
- Html5绘制饼图统计图
这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...
- HTML5 WebAudioAPI(四)--绘制频谱图2
绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...
- Echarts数据可视化series-line线图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- 如何从零绘制k线图 -- 原生js canvas图表绘制
样式如下图 源码地址: https://github.com/sutianbinde/charts 编写这个需要具备canvas基础,如果没有canvas基础可以学习我前面的cnavas基础博客. 具 ...
- 基于Echarts的股票K线图展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...
随机推荐
- android 数据共享
android数据共享的各种部件中的应用是最重要的3途径: 第一.使用Application子类来实现数据共享. 例如,请看下面的例子: /** * @author YangQuanqing 特征: ...
- SOA、REST 和六边形架构
SOA.REST 和六边形架构 上一篇:<IDDD 实现领域驱动设计-架构之经典分层> 阅读目录: SOA-面向服务架构 REST 与 RESTful 资源(Resources) 状态(S ...
- 【百度地图API】——国内首款团购网站的地图插件
原文:[百度地图API]--国内首款团购网站的地图插件 摘要: 本文介绍了一款应用在团购网站上的地图插件,适用于目前非常流行的团购网站.使用这款地图插件,无需任何编程技术,你就把商家的位置轻松地标注在 ...
- Cocos2d-x数据持久-变更数据
当数据变化,参与SQL报表insert.update和delete声明.这项3个月SQL语句可以带参数. 详细过程的数据,例如,下面的变化看出.(1) 采用sqlite3_open开放式数据库功能.( ...
- Windows Phone 8.1 多媒体(3):音乐
原文:Windows Phone 8.1 多媒体(3):音乐 Windows Phone 8.1 多媒体(1):相片 Windows Phone 8.1 多媒体(2):视频 Windows Phone ...
- 音乐TV2015校园招聘A第二大发行量(对中国科学院大学站)
标题叙述性说明:鉴于阵列A,尺寸n,数组元素1至n数位,但是,一些数字多次出现,有些数字不出现.请设计算法和程序.统计数据不会出现什么.什么号码多次出现. 您可以O(n)时间复杂度,O(1)求下完毕么 ...
- DELL iDRAC 远程虚拟机报错:虚拟介质分离或所选虚拟磁盘驱动器的虚拟介质重定向已由另一用户使用
原因很简单,那就是虚拟介质的映射功能,只能被使用一次. 推荐做法: 1.由于通过远程,在Lifecycle Controller里DeployOS安装系统,需要在虚拟介质里映射ISO,因此映射功能要留 ...
- 关于ligerform中select与text的赋值与取值
如有下ligerform表单: var formData = [ { display: "区域", name: "QYYJ", newline: true, l ...
- leetcode第21题--Generate Parentheses
problem: Given n pairs of parentheses, write a function to generate all combinations of well-formed ...
- Linux 启动过程的详细解释
对于无论什么系统, 但无法打开电源这么简单的事, 很多事情将在几秒钟内几秒钟或几十本短时间内发生, 了解这一过程将是完整的引导解决问题的任何或提高开机速度的前提. 下一个, 我们会专门寻找Linux程 ...