8、基于笛卡尔坐标系的图表创建与优化

基于笛卡尔坐标系的图表创建与优化

在数据可视化领域，创建清晰、美观且功能丰富的图表是至关重要的。本文将详细介绍如何解决数字格式问题、构建烛台图（股票图表）以及为股票图表添加其他渲染选项等内容。

1. 数字格式清理

当数值显示不美观时，我们可以创建一个格式化函数，每次输出动态创建的值时调用它。以下是具体的函数实现：

function formatNumber(num, lead) {
    for (var i = 0; i < lead; i++) num *= 10;
    num = parseInt(num);
    for (var i = 0; i < lead; i++) num /= 10;
    return num;
}

该函数有两个参数：要格式化的值 num 和小数点后的位数 lead 。函数的逻辑是先将值乘以 10，乘以的次数由 lead 决定，然后将其转换为整数，最后再除以 10。

在 fillChart 函数中找到受影响的文本，并更新为使用新的格式化函数：

context.fillText(formatNumber(yData.min + stepSize * (steps - i), 2), 0, currentY + 4);

这样，数值的显示格式会更加美观。 <