Question

我按照教程使用js创建了一个画布图。代码绘图是这样的：

function plotData(context, dataSet, sections, xScale) {
    context.lineWidth = 1;
    context.outlineWidth = 0;
    context.strokeWidth = 0;
    context.beginPath();
    context.moveTo(0, dataSet[0]);
    for (i=0; i<sections; i++) {
        context.lineTo(i * xScale, dataSet[i]);
    }
    context.stroke();
}

我用一个数组来调用这个函数，该数组包含要去的点..每列计算x值（xScale），如果我使用多于1个数据源，结果图表显示正常。工作正常时的屏幕截图：

http://s21.postimg.org/vlc1qg9iv/Screen_Shot_2016_04_08_at_15_48_42.png

但是当我删除最后2个数据行并且只留下1行时（因此当图表的最大值和最小值之间的差异较小时，它会显示如下：

http://s16.postimg.org/ex0fakef9/Screen_Shot_2016_04_08_at_15_44_21.png

在这个屏幕截图中，你可以清楚地看到，虽然它应该画一条线，但这条线不是一条1px线而是一条形状，就像一条（严重）扭曲的线条？

我不确定我是做错了什么还是我明显无视某些事情？画布的高度是固定的，始终使用以下公式计算：

canvas = $('#canvas-container canvas')[0];
canvas.width = $('#canvas-container').width() * 0.9;
canvas.height = $('#canvas-container').width() / 1.45;

谢谢！

确切效果的Codepen（来自确切的教程）可以在这里找到：

https://codepen.io/anon/pen/JXMwBy?editors=1111

（注意我还有2行图表数据被注释掉，这样做我使Val_max和Val_min变量不同，以“拉伸”Y行中的数据）

不能在画布上画细线？

0 个答案: