如何在不使用外部库的情况下使用 JavaScript 绘制折线图

How to draw line graph with JavaScript without using external libraries

本文关键字：情况下 JavaScript 折线图 绘制 外部      更新时间：2023-09-26

简短起见：

我想在不使用（开源）库的情况下用JavaScript绘制折线图。我使用的只是JavaScript和jQuery（无插件！）。

我该如何管理？

我认为你忽略了一些非常强大的库，但是如果你决定自己做这件事，你将需要使用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();
});

最好的解决方案（除了外部库）可能是HTML5中引入的canvas。

这是一个教程，您可以通过Google找到更多信息。

相关文章：