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 chartcanvasWidth = 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 framec.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 textsc.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 textsc.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 dotsc.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文件即可)
![](/assets/blank.gif)
![](/assets/blank.gif)
<!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 settingsvar chartSizePercent = 55; // The chart radius relative to the canvas width/height (in percent)var sliceBorderWidth = 1; // Width (in pixels) of the border around each slicevar sliceBorderStyle = "#fff"; // Colour of the border around each slicevar sliceGradientColour = "#ddd"; // Colour to use for one end of the chart gradientvar maxPullOutDistance = 25; // How far, in pixels, to pull slices out when clickedvar pullOutFrameStep = 4; // How many pixels to move a slice with each animation framevar pullOutFrameInterval = 40; // How long (in ms) between each animation framevar pullOutLabelPadding = 65; // Padding between pulled-out slice and its label var pullOutLabelFont = "bold 16px 'Trebuchet MS', Verdana, sans-serif"; // Pull-out slice label fontvar pullOutValueFont = "bold 12px 'Trebuchet MS', Verdana, sans-serif"; // Pull-out slice value fontvar pullOutValuePrefix = ""; // Pull-out slice value prefixvar pullOutShadowColour = "rgba( 0, 0, 0, .5 )"; // Colour to use for the pull-out slice shadowvar pullOutShadowOffsetX = 5; // X-offset (in pixels) of the pull-out slice shadowvar pullOutShadowOffsetY = 5; // Y-offset (in pixels) of the pull-out slice shadowvar pullOutShadowBlur = 5; // How much to blur the pull-out slice shadowvar pullOutBorderWidth = 2; // Width (in pixels) of the pull-out slice bordervar pullOutBorderStyle = "#333"; // Colour of the pull-out slice bordervar chartStartAngle = -.5 * Math.PI; // Start the chart at 12 o'clock instead of 3 o'clock// Declare some variables for the chartvar canvas; // The canvas element in the pagevar 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 animationvar 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 chartvar canvasWidth; // Width of the canvas, in pixelsvar canvasHeight; // Height of the canvas, in pixelsvar centreX; // X-coordinate of centre of the canvas/chartvar centreY; // Y-coordinate of centre of the canvas/chartvar chartRadius; // Radius of the pie chart, in pixelsvar chartElementId = chartElementId; // 圆饼元素idvar 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 pagecanvas = document.getElementById(chartElementId);// Exit if the browser isn't canvas-capableif ( typeof canvas.getContext === 'undefined' ) return;// Initialise some properties of the canvas and chartcanvasWidth = 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 cellsvar 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 colourif ( 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 datavar 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 canvasvar 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 sliceif ( currentPullOutSlice == slice ) return;// Record the slice that we're pulling out, clear any previous animation, then start the animationcurrentPullOutSlice = 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 morecurrentPullOutDistance += pullOutFrameStep;// If we've pulled it right out, stop animatingif ( 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 contextvar context = canvas.getContext('2d');// Clear the canvas, ready for the new framecontext.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 slicevar 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 centrestartX = centreX;startY = centreY;}// Set up the gradient fill for the slicevar 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 appropriatelyif ( 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>
View Code
总结:
让我们继续前行
----------------------------------------------------------------------
努力不一定成功,但不努力肯定不会成功。
共勉。
html5实现饼图和线图-我们到底能走多远系列(34)相关推荐
- Java 阶段面试 知识点合集 - 我们到底能走多远系列(15)
我们到底能走多远系列(15) 扯淡:这些知识点来源是通过面试涉及到的,面的公司不多,知识点涉及也不多,我每次面试后都在备忘录里写下有用的东西,集合起来分享一下,因为是知识点,所以就不出什么面试题目啦. ...
- 图片尺寸判断等-我们到底能走多远系列(21)
我们到底能走多远系列(21) 扯淡:又是一年过年,给各位拜个很早很早的年,实在点的祝福:祝各位明年工资全部翻一番啦! 主题: 1,判断上传图片尺寸功能 如下代码即可在页面上结果掉这个问题: var i ...
- js中this和回调方法循环-我们到底能走多远系列(35)
我们到底能走多远系列(35) 扯淡: 13年最后一个月了,你们在13年初的计划实现了吗?还来得及吗? 请加油~ 主题: 最近一直在写js,遇到了几个问题,可能初入门的时候都会遇到吧,总结下. 例子: ...
- 程序员在写作这条路上到底能走多远?
01 杨过这辈子什么时候最痛苦?被郭襄她姐砍掉了一只胳膊的时候,那时他身中情花之毒,活不了多久了,他最爱的姑姑又不辞而别:在这个时候,他想到的就是一个人偷偷地离开,做好了告别这个世界的准备. 我在什么 ...
- 家装灯线走线图_电工装修走线图_电工装饰走线图
电工的电路图怎么布置? 水电工程一般是装修的第一个工程,一般的装修都会涉及到水电改造的. 1.设计师根据你的水电分布给出一个水电图,上面会明确的标注哪些灯,以及用点开关是走一条线的,灯和插座的分布.如 ...
- 网红经济到底能走多远?
网红经济是以一位年轻貌美的时尚达人为形象代表,以红人的品味和眼光为主导,进行选款和视觉推广,在社交媒体上聚集人气,依托庞大的粉丝群体进行定向营销,从而将粉丝转化为购买力的一个过程.n由于变现能力强大, ...
- 计算机在3d打印发挥的作用,七大优势汇总 看3D打印的路到底能走多远
[PConline 资讯]3D打印到底是什么?其实很多人都会认为它只不过是一种将二维喷墨或激光打印立体化的产品,很多人对于这多出的一个维度到底意味着什么概念比较模糊.先进的生产力一向都是经济发展不可或 ...
- 复现《NC》图表(二):R语言一键画表达量箱线图并添加显著性
我们接着重现NC这篇文章的Figure2,这篇文章里有很多这样的箱线图,这也是这个重现系列重点要讲的内容.原文作者提供了这部分代码,对于所有图提供了详细的数据,可以参考作图. 这里重现的重点在于批量画 ...
- 笔记——数据可视化03(饼图、圆环图、箱线图、棉棒图、误差图、子图)
导入模块 plt.pie() x :(每一块)的比例,如果sum(x) > 1会使用sum(x)归一化: labels:(每一块)饼图外侧显示的说明文字: explode:(每一块)离开中心距离 ...
最新文章
- IT风险的防控水平是一个“木桶”原理
- 对Linux0.11 中 进程0 和 进程1分析
- 湖南雅礼培训 1.1
- app启动页数秒加载 代码_干货 | App 自动化测试痛点(弹框及首页启动加载完成判断处理)
- php实现把es6转为es5,如何将ES6代码转化为ES5?
- Python编程从入门到实践~函数
- WCF Service 配置文件注释(转)
- DIV+CSS常见错误汇总
- PyCharm安装配置Django,启动第一个Django项目Hello World
- JQuery-Ztree 树插件下载 与 快速入门
- 怎样在计算机上安装计算器,如何在win10系统电脑上重新安装计算器
- hdfs命令_HDFS命令
- 使用爱剪辑等软件制作视频的全套入门教程
- Linux版的led显示屏控制软件,中航Led显示屏控制软件下载
- APFNet训练+测试复现过程记录
- mysql中1和0分别代表什么
- ASP.NET教师排课系统
- html页面打印插件,分享8款网站开发中最好用的打印页面插件
- excel中文件合并F9键
- Java语言西安交大高起专_2018年西安交大网络学院高起专/本英语入学考试复习题...