javascript-gRaphael线图绘制超出轴的值

2019-10-31 09:36:31 阅读：241 来源： 互联网

当使用gRaphael沿x轴使用毫秒绘制线图时,我通常会在数据点的位置上出现不一致的情况.最常见的是,初始数据点位于y轴的左侧(如下面的小提琴所示),有时最后一个数据点将位于视图框的右侧之外/过去是x轴的终止点.

有人知道吗：
1)为什么会这样,
2)如何预防和/或
3)如何检查它(如果我知道何时发生/移动了多少,可以使用变换移动线/点).

我的代码：

var r = Raphael("holder"),
txtattr = { font: "12px sans-serif" };
var r2 = Raphael("holder2"),
txtattr2 = { font: "12px sans-serif" };

var x = [], y = [], y2 = [], y3 = [];

for (var i = 0; i < 1e6; i++) {
    x[i] = i * 10;
    y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3;
}
var demoX = [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]];
var demoY = [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]];

var xVals = [1288885800000, 1289929440000, 1290094500000, 1290439560000, 1300721700000,   1359499228000, 1359499308000, 1359499372000];
var yVals = [80, 76, 70, 74, 74, 78, 77, 72];
var xVals2 = [1288885800000, 1289929440000];
var yVals2 = [80, 76];

var lines = r.linechart(10, 10, 300, 220, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })
.hoverColumn(function () {
    this.tags = r.set();

    for (var i = 0, ii = this.y.length; i < ii; i++) {
        this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
        }
    }, function () {
        this.tags && this.tags.remove();
        });

lines.symbols.attr({ r: 3 });


var lines2 = r2.linechart(10, 10, 300, 220, xVals2, yVals2, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })
.hoverColumn(function () {
    this.tags = r2.set();

    for (var i = 0, ii = this.y.length; i < ii; i++) {
        this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
        }
    }, function () {
        this.tags && this.tags.remove();
        });

lines2.symbols.attr({ r: 3 });

我必须使用gRaphael,并且x轴必须以毫秒为单位(稍后标记为w /自定义日期字符串)

主要示例提琴：http://jsfiddle.net/kcar/aNJxf/

次要示例小提琴(第4页上的示例经常显示两个轴错误)：
http://jsfiddle.net/kcar/saBnT/

根本原因是snapEnds函数(第718行g.raphael.js),在某些情况下可以进行四舍五入,但在某些情况下可以在日期中加上或减去年份.

在此之后,还没有完全解决问题,但是由于每次舍入都会使数据点放错位置,而不是在没有舍入时,数据点会放错位置,因此我将继续进行下去,并假定这会导致计算图表列时出现问题,也就是在发送到snapEnds之前,应立即确定值,以确认其不仅接收了错误计算的数据.

g.raphael.js中该函数的代码

snapEnds: function(from, to, steps) {
    var f = from,
        t = to;

    if (f == t) {
        return {from: f, to: t, power: 0};
    }

    function round(a) {
        return Math.abs(a - .5) < .25 ? ~~(a) + .5 : Math.round(a);
    }

    var d = (t - f) / steps,
        r = ~~(d),
        R = r,
        i = 0;

    if (r) {
        while (R) {
            i--;
            R = ~~(d * Math.pow(10, i)) / Math.pow(10, i);
        }

        i ++;
    } else {
        if(d == 0 || !isFinite(d)) {
            i = 1;
        } else {
            while (!r) {
                i = i || 1;
                r = ~~(d * Math.pow(10, i)) / Math.pow(10, i);
                i++;
            }
        }

        i && i--;
    }

    t = round(to * Math.pow(10, i)) / Math.pow(10, i);

    if (t < to) {
        t = round((to + .5) * Math.pow(10, i)) / Math.pow(10, i);
    }

    f = round((from - (i > 0 ? 0 : .5)) * Math.pow(10, i)) / Math.pow(10, i);
    return { from: f, to: t, power: i };
},

解决方法:

删除了来自snapEnds的舍入废话,没有其他问题,没有注意到图表的任一轴或任何其他区域的不利影响.如果您看到一个,我还是很想听听.

现在来自g.raphael.js的该函数的代码：

snapEnds: function(from, to, steps) {
     return {from: from, to: to, power: 0};       
},

标签：linechart,graphael,javascript
来源： https://codeday.me/bug/20191031/1974696.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-gRaphael线图绘制超出轴的值