📄 16.html
字号:
<head><script>/** * data is an array of numbers to be plotted as a time-series * dx is the number of x pixels between data points * config is an object that holds values that are likely to * be the same for multiple invocations: * height: the height, in pixels of the generated image * ymin, ymax: the range, or Y axis bounds in user-space * backgroundColor: the background color as a numeric HTML color. * lineWidth: the width of the line to draw * lineColor: the color of the line to draw as an HTML # color spec * dotColor: if specified, a dot of this color will be placed on * the last data point * bandColor: If specified, a band of this color will be drawn between * the bandMin and bandMax values to represent a "normal" range of * data values, and emphasize the values that exceed that range */function makeSparkline(data, dx, config) { var width = data.length * dx + 1; // overall image width var yscale = config.height/(config.ymax - config.ymin); // For scaling data // Convert data point number to a pixel value function x(i) { return i * dx; } // Convert a Y coordinate from user space to pixel space function y(y) { return config.height - (y - config.ymin)*yscale; } // Convert an HTML color spec to a java.awt.Color object function color(c) { c = c.substring(1); // Remove leading # if (c.length == (3)) { // convert to 6-char rep, if needed c = c.charAt(0) + c.charAt(0) + c.charAt(1) + c.charAt(1) + c.charAt(2) + c.charAt(2); } var red = parseInt(c.substring(0,2), 16); var green = parseInt(c.substring(2,4), 16); var blue = parseInt(c.substring(4,6), 16); return new java.awt.Color(red/255, green/255, blue/255); } // Create an offscreen image for the sparkline var image = new java.awt.image.BufferedImage(width, config.height, java.awt.image.BufferedImage.TYPE_INT_RGB); // Get a Graphics object that lets us draw into that image var g = image.createGraphics(); // Antialias everything. Tradeoff: makes the line smoother but fuzzier g.setRenderingHint(java.awt.RenderingHints.KEY_ANTIALIASING, java.awt.RenderingHints.VALUE_ANTIALIAS_ON); // Fill the image with the background color g.setPaint(color(config.backgroundColor)); g.fillRect(0, 0, width, config.height); // If a bandColor was specified, draw the band if (config.bandColor) { g.setPaint(color(config.bandColor)); g.fillRect(0, y(config.bandMax), width, y(config.bandMin)-y(config.bandMax)); } // Now build the line var line = new java.awt.geom.GeneralPath(); line.moveTo(x(0), y(data[0])); for(var i = 1; i < data.length; i++) line.lineTo(x(i), y(data[i])); // Set the line color and width, then draw the line g.setPaint(color(config.lineColor)); // Set line color g.setStroke(new java.awt.BasicStroke(config.lineWidth)); // Set width g.draw(line); // Draw! // If the dotColor was set, draw the dot if (config.dotColor) { g.setPaint(color(config.dotColor)); var dot=new java.awt.geom.Ellipse2D$Double(x(data.length-1)-.75, y(data[data.length-1])-.75, 1.5, 1.5) g.draw(dot); } // Write the image out as a byte array in PNG format var stream = new java.io.ByteArrayOutputStream(); Packages.javax.imageio.ImageIO.write(image, "png", stream); var imageData = stream.toByteArray(); // Convert the data to a URL-encoded string var rawString = new java.lang.String(imageData, "iso8859-1"); var encodedString = java.net.URLEncoder.encode(rawString, "iso8859-1"); encodedString = encodedString.replaceAll("\\+", "%20"); // And return it all as a data: URL return "data:image/png," + encodedString;}// Here is an example that uses the makeSparkline() functionwindow.onload = function() { // Create the img tag for the sparkline var img = document.createElement("img"); img.align = "center"; img.hspace = 1; // Set its src attribute to the data: URL of the sparkline img.src = makeSparkline([3, 4, 5, 6, 7, 8, 8, 9, 10, 10, 12, 16, 11, 10, 11, 10, 10, 10, 11, 12, 16, 11, 10, 11, 10, 10, 10, 11, 12, 14, 16, 18, 18, 19, 18, 17, 17, 16, 14, 16, 18, 18, 19, 18, 17, 17, 16], 2, { height: 20, ymin: 0, ymax: 20, backgroundColor: "#fff", lineWidth: 1, lineColor: "#000", dotColor: "#f00", bandColor: "#ddd", bandMin: 6, bandMax: 14 }); // Find the placeholder element for the sparkline var placeholder = document.getElementById("placeholder"); // And replace it with the image. placeholder.parentNode.replaceChild(img, placeholder);}</script></head><body>Server load: <span id="placeholder"></span><span style="color:#f00">16</span></body>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -