javascript - 在 HTML 5 的 Canvas 中制作数据图

Question

我正在 Canvas 中获取信息并将其绘制到图表上。最终它将转到 php 并从服务器检索数据，但现在我只需要它正确绘制任何数据。

我按照自己的意愿绘制了 Canvas ，并开始绘制数据，但是当我这样做时，它并没有给我一条细小的路径，它更像是一个覆盖所有内容的巨大 Blob 。在查看我的代码时，重要的是要知道它主要只是 Canvas 的初始化，但我需要发布大部分内容，以便为程序中发生的情况提供上下文。

var canvas ;
var context ;
var Val_max;
var Val_min;
var sections;
var xScale;
var yScale;
var Apple =  [10.25,10.30,10.10,10.20];

function init() {
            Val_max = 10.5;
            Val_min = 10;
            var stepSize = .049999999999999; //.5 results in inaccurate results
            var columnSize = 50;
            var rowSize = 20;
            var margin = 20;
            var xAxis = [" "," "," ", " ", " ", "10AM", " ", " ", " ", " ", " ", "11AM", " ", " ", " ", " ", " ", "12PM", " ", " ", " ", " ", " ",  "1PM", " ", " ", " ", " ", " ", "2PM", " ", " ", " ", " ", " ", "3PM", " ", " ", " ", " ", " ", "4PM"]; 
            sections = xAxis.length-1;

            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");
            context.fillStyle = "#808080";

            yScale = (canvas.height - columnSize - margin) / (Val_max - Val_min); // Total height of the graph/range of graph
            xScale = (canvas.width - rowSize - margin) / sections; // Total width of the graph/number of ticks on the graph

            context.strokeStyle="#808080"; // color of grid lines
            context.beginPath();
                // print Parameters on X axis, and grid lines on the graph

                context.moveTo(xScale+margin, columnSize - margin);
                context.lineTo(xScale+margin, columnSize + (yScale * 10 * stepSize) - margin);      //draw y axis       

            for (i=1;i<=sections;i++) {
                var x = i * xScale;
                context.moveTo(x + margin, columnSize + (yScale * 10 * stepSize) - margin);
                context.lineTo(x + margin, columnSize + (yScale * 10 * stepSize) - margin - 5); //draw ticks along x-axis
                context.fillText(xAxis[i], x,canvas.height - margin); //Time along x axis
            }
                // print row header and draw horizontal grid lines
            var count =  0;
            context.moveTo(xScale+margin, 260);
            context.lineTo(canvas.width - margin, 260); // draw x axis

            for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
                scale = scale.toFixed(2);
                var y = columnSize + (yScale * count * stepSize) - margin; 

                context.fillText(scale, margin - 20,y);
                context.moveTo(xScale+margin, y);
                context.lineTo(xScale+margin+5, y); //Draw ticks along y-axis
                count++;
            }
            context.stroke();

            context.translate(rowSize,canvas.height + Val_min * yScale);
            context.scale(1,-1 * yScale);

                // Color of each dataplot items

            context.strokeStyle="#FF0066";
            //plotData(Apple);
            context.strokeStyle="#9933FF";
            //plotData(Samsung);
            context.strokeStyle="#000";
            //plotData(Nokia);


        }

好吧，这就是 Canvas 的初始化，我知道它很困惑，但我想我必须为下一个函数引用其中的某些内容。

        function plotData(dataSet) {
            var margin = 20;
            context.beginPath();
            context.moveTo(xScale+margin, dataSet[0]);
            for (i=0;i<sections;i++) {
                context.lineTo(i * xScale + margin, dataSet[i]);
            }
            context.stroke();
        }

该函数应该从数组中获取数据并将其绘制在图表上。我可以画出它，但它不是一条细线。这是我得到的 Blob 的图片。

它似乎也没有准确地绘制我的数组中的坐标。

我知道这个问题非常深入，但我们将不胜感激!

Answer 1

平移和缩放应用于当前变换。每次您调用它们时，您都会进行更多的翻译和缩放。

使用保存和恢复来恢复原始转换。

context.save();  // <--------------------- added
context.translate(rowSize,canvas.height + Val_min * yScale);
context.scale(1,-1 * yScale);

    // Color of each dataplot items

context.strokeStyle="#FF0066";
//plotData(Apple);
context.strokeStyle="#9933FF";
//plotData(Samsung);
context.strokeStyle="#000";
//plotData(Nokia);
context.restore();   // <-------------------- added