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实现饼图和线图-我们到底能走多远系列(34)的更多相关文章
- html5实现饼图和线图
html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 ...
- Spring mvc源码url路由-我们到底能走多远系列(38)
我们到底能走多远系列38 扯淡: 马航的事,挺震惊的.还是多多珍惜身边的人吧. 主题: Spring mvc 作为表现层的框架,整个流程是比较好理解的,毕竟我们做web开发的,最早也经常接触的就是一个 ...
- node实现http上传文件进度条 -我们到底能走多远系列(37)
我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...
- Sharded实现学习-我们到底能走多远系列(32)
我们到底能走多远系列(32) 扯淡: 工作是容易的赚钱是困难的 恋爱是容易的成家是困难的 相爱是容易的相处是困难的 决定是容易的可是等待是困难的 主题: 1,Sharded的实现 Sharded ...
- 初始化IoC容器(Spring源码阅读)-我们到底能走多远系列(31)
我们到底能走多远系列(31) 扯淡: 有个问题一直想问:各位你们的工资剩下来会怎么处理?已婚的,我知道工资永远都是不够的.未婚的你们,你们是怎么分配工资的? 毕竟,对自己的收入的分配差不多体现了自己的 ...
- JMS生产者+单线程发送-我们到底能走多远系列(29)
我们到底能走多远系列(29) 扯淡: “然后我俩各自一端/望着大河弯弯/终于敢放胆/嘻皮笑脸/面对/人生的难” --- <山丘> “迎着风/迎向远方的天空/路上也有艰难/也有那解 ...
- ArrayBlockingQueue-我们到底能走多远系列(42)
我们到底能走多远系列(42) 扯淡: 乘着有空,读些juc的源码学习下.后续把juc大致走一边,反正以后肯定要再来. 主题: BlockingQueue 是什么 A java.util.Queue t ...
- ThreadPoolExecutor机制探索-我们到底能走多远系列(41)
我们到底能走多远系列(41) 扯淡: 这一年过的不匆忙,也颇多感受,成长的路上难免弯路,这个世界上没人关心你有没有变强,只有自己时刻提醒自己,不要忘记最初出发的原因. 其实这个世界上比我们聪明的人无数 ...
- 服务调用方案(Spring Http Invoker) - 我们到底能走多远系列(40)
我们到底能走多远系列(40) 扯淡: 判断是否加可以效力于这家公司,一个很好的判断是,接触下这公司工作几年的员工,了解下生活工作状态,这就是你几年后的状态,如果满意就可以考虑加入了. 主题: 场景: ...
随机推荐
- hibernate generator class=xxx id详解
<id>元素中的<generator>用来为该持久化类的实例生成唯一的标识,hibernate提供了很多内置的实现.Increment:由hibernate自动递增生成标识符, ...
- ext DateTime.js在ie下显示不全
问题: ext在使用DateTime.js的时候会出现在日期控件在ie下显示不完成.如图 少了底部的“今天按钮”. 解决方法: 在ext/ux/form/DateTime.js (我的是这个路径,根 ...
- Drag+Drop和MouseClick
项目中的一个树形结节,既要响应拖拽事件.又要响应点击事件.实现的时候没多想,依次实现了tree_MouseClick.tree_MouseDown.tree_MouseMove事件.出现的Bug是,偶 ...
- java枚举类
enum关键字用于定义枚举类,若枚举只有一个成员, 则可以作为一种单例模式的实现方式. 枚举类对象的属性不应允许被改动, 所以应该使用 private final 修饰. 枚举类的使用 priva ...
- Codeforces Round #326 (Div. 2)-Duff in Love
题意: 一个数x被定义为lovely number需要满足这样的条件:不存在一个数a(a>1),使得a的完全平方是x的因子(即x % a2 != 0). 给你一个数n,求出n的因子中为love ...
- C++指针详解(二)
指针是C/C++编程中的重要概念之一,也是最容易产生困惑并导致程序出错的问题之一.利用指针编程可以表示各种数据结构,通过指针可使用主调函数和被调函数之间共享变量或数据结构,便于实现双向数据通讯:指针能 ...
- dialog参数、方法以及事件
参数(options) DOM方式初始化dialog的,推荐使用集合属性data-options定义参数,如果使用data属性定义参数,注意转换成对应的名称. 名称 类型 默认值 描述 id stri ...
- ios 检测应用程序升级问题
app 上其实已经有自动检测我们版本的功能. 其实我也觉得对于一个程序员来说检测功能让,系统来维护更合适和合理.开发者只要告诉苹果即可. 然而今天老大非要实现自己版本更新的问题,因此也查找了相关的资 ...
- 2013年8月份第3周51Aspx源码发布详情
BaiduMusic Cache源码 2013-8-23 [VS2012]功能介绍:可以读取并保存百度音乐(Win8应用程序商店版本)的缓存.可以检测电脑是否安装了百度音乐,支持缓存音乐的导出功能. ...
- keil(持续更新)
1函数格式提示 2 cording时有警告和错误提示 3 类的成员 提示