如何在不使用外部库的情况下使用 JavaScript 绘制折线图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11972268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw line graph with JavaScript without using external libraries
提问by keinabel
To make it short:
简而言之：
I want to draw a line graph with JavaScript without using a (open-source) library. All I work with is JavaScript and jQuery (no-plugins!).
我想在不使用（开源）库的情况下用 JavaScript 绘制折线图。我只使用 JavaScript 和 jQuery（无插件！）。
How can I manage this?
我该如何管理？
回答by Paul Aldred-Bann
I think you're overlooking some very powerful libraries, however if you're determined to do this yourself you're going to need to use HTML5 and the Canvas object. Have a look at this great tutorialto get you started. Here's a snapshot of what you'll need to get to grips with:
我认为您忽略了一些非常强大的库，但是如果您决定自己这样做，您将需要使用 HTML5 和 Canvas 对象。看看这个很棒的教程，让你开始。这是您需要掌握的内容的快照：
$(document).ready(function() {
var graph = $('#graph'),
c = graph[0].getContext('2d');
c.lineWidth = 2;
c.strokeStyle = '#333';
c.font = 'italic 8pt sans-serif';
c.textAlign = "center";
c.beginPath();
c.moveTo(xPadding, 0);
c.lineTo(xPadding, graph.height() - yPadding);
c.lineTo(graph.width(), graph.height() - yPadding);
c.stroke();
});
