张三: 嘿，李四，最近我需要做一个在线的数据可视化工具，你觉得应该怎么做？
李四: 嗯，这挺有趣的。你可以考虑使用JavaScript结合HTML5的Canvas来实现。这样可以动态地绘制各种图表。
张三: 听起来不错，那我们从最简单的折线图开始吧。你知道有什么库可以帮助我们快速搭建吗？
李四: 当然有啦，比如Chart.js就是一个很流行的JavaScript库，它能够轻松创建漂亮的折线图。
张三: 那么，如果我不想依赖外部库呢？我想自己动手试试看。
李四: 没问题！我们可以直接用Canvas API来画折线图。首先，我们需要一个基本的HTML结构。
<html>
<body>
<canvas id="lineChart" width="400" height="400"></canvas>
<script src="lineChart.js"></script>
</body>
</html>
张三: 这样就设置好了画布，接下来就是编写绘制逻辑了。
const canvas = document.getElementById('lineChart');
const ctx = canvas.getContext('2d');
// 数据
const data = [10, 20, 15, 25, 30];
// 绘制折线图
function drawLineChart() {
ctx.beginPath();
ctx.moveTo(50, 400 - data[0] * 10);
for (let i = 1; i < data.length; i++) {
const x = 50 + i * 50;
const y = 400 - data[i] * 10;
ctx.lineTo(x, y);
}
ctx.strokeStyle = '#FF0000';
ctx.stroke();
}
drawLineChart();
李四: 看到了吗？这段代码会在画布上绘制一条简单的折线图。
张三: 真棒！不过我还想添加一些文本标签和坐标轴。
李四: 添加这些也很简单。我们只需要在绘制线条之前先画出坐标轴和标签即可。
// 添加坐标轴
ctx.beginPath();
ctx.moveTo(50, 0);
ctx.lineTo(50, 400);
ctx.moveTo(50, 400);
ctx.lineTo(450, 400);
ctx.strokeStyle = '#000000';
ctx.stroke();
// 添加X轴标签
ctx.font = '12px Arial';
ctx.fillText('Time', 450, 410);
// 添加Y轴标签
ctx.rotate(-Math.PI / 2);
ctx.fillText('Value', -200, -20);
ctx.rotate(Math.PI / 2);
张三: 太酷了！现在看起来更像是一个完整的图表了。
李四: 是的，而且这种方式完全基于原生技术，不依赖任何外部库，非常适合学习和定制化开发。
]]>