簡體   English   中英

canvas.js,在圖表中顯示一個值,但在X軸上顯示另一個值

[英]canvasjs, show one value in chart but another in X axis

即時通訊使用CanvasJs顯示一些圖表。 當我將鼠標移到該點上時,它會顯示錯誤的日期。在圖片中Im超過12-jun,但它說11-jun ..在每個點上都發生相同的情況。

值“ 32”是確定的,日期不是確定的。

但是,如果我在單獨的圖表中顯示系列,則數據就可以了。

圖表

腳本:

$.getJSON("dataNro7.php", function (result) {


            var dps1 = [], dps2 = [];
        for(var i = 0; i < result.length; i++) {



            switch(result[i].palabra) {

            case 'pa': dps1.push({ x:  new Date (result[i].label), y: result[i].y });
                break;
            case 'ma': dps2.push({ x:  new Date(result[i].label), y: result[i].y });
                break;
            }
        }


                var revenueBarChart = new CanvasJS.Chart("Historiales2y3", {
                    animationEnabled: false,
                    backgroundColor: "transparent",
                    theme: "theme2",
                    axisX:{
                            interval: 2,
                            valueFormatString: "DD-MMM" ,
                            gridThickness: 0,
                            labelFontSize: 12,
                            labelMaxWidth: 100,
                            labelAngle: 0,
                            culture: "es",
                            labelFontStyle: "normal",
                            labelFontWeight: "normal",
                            labelFontFamily: "Lucida Sans Unicode"

                        },
                    axisY2:{

                            labelFontSize: 12,
                            interlacedColor: "rgba(1,77,101,.05)",
                            gridColor: "rgba(1,77,101,.1)"

                        },


                    data: [   { type: "splineArea",
                                showInLegend: true,
                                name: "PA",
                                color: "rgba(12,143,221,.8)",
                                axisYType: "secondary",
                                 dataPoints: dps1 },

                            { type: "splineArea",
                                showInLegend: true,
                                name: "MA",
                                color: "rgba(192,143,121,.8)",
                                axisYType: "secondary",
                                 dataPoints: dps2 } ]

                });


                revenueBarChart.render();
            }); 

JSON:

[{"palabra":"pa","y":22,"label":"2017-05-28"},
 {"palabra":"ma","y":10,"label":"2017-05-28"},
 {"palabra":"pa","y":8,"label":"2017-05-29"},
 {"palabra":"ma","y":30,"label":"2017-05-29"},
 {"palabra":"pa","y":0,"label":"2017-05-30"},
 {"palabra":"ma","y":0,"label":"2017-05-30"},
 {"palabra":"pa","y":12,"label":"2017-05-31"},
 {"palabra":"ma","y":16,"label":"2017-05-31"},                    
 {"palabra":"pa","y":7,"label":"2017-06-01"},
 {"palabra":"ma","y":36,"label":"2017-06-01"},
 {"palabra":"pa","y":12,"label":"2017-06-02"},
 {"palabra":"ma","y":33,"label":"2017-06-02"},
 {"palabra":"pa","y":0,"label":"2017-06-03"},
 {"palabra":"ma","y":14,"label":"2017-06-03"},{"palabra":"pa","y":5,"label":"2017-06-04"},{"palabra":"ma","y":30,"label":"2017-06-04"},{"palabra":"pa","y":19,"label":"2017-06-05"},{"palabra":"ma","y":25,"label":"2017-06-05"},{"palabra":"pa","y":11,"label":"2017-06-06"},{"palabra":"ma","y":35,"label":"2017-06-06"},{"palabra":"pa","y":24,"label":"2017-06-07"},{"palabra":"ma","y":34,"label":"2017-06-07"},{"palabra":"pa","y":24,"label":"2017-06-08"},{"palabra":"ma","y":59,"label":"2017-06-08"},{"palabra":"pa","y":0,"label":"2017-06-09"},{"palabra":"ma","y":39,"label":"2017-06-09"},{"palabra":"pa","y":14,"label":"2017-06-10"},{"palabra":"ma","y":22,"label":"2017-06-10"},{"palabra":"pa","y":13,"label":"2017-06-11"},{"palabra":"ma","y":6,"label":"2017-06-11"},{"palabra":"pa","y":18,"label":"2017-06-12"},{"palabra":"ma","y":32,"label":"2017-06-12"},{"palabra":"pa","y":17,"label":"2017-06-13"},{"palabra":"ma","y":49,"label":"2017-06-13"},{"palabra":"pa","y":15,"label":"2017-06-14"},{"palabra":"ma","y":12,"label":"2017-06-14"}]

MDN中所述

給定日期字符串為“ 2014年3月7日”,parse()假定為本地時區,但給定ISO格式如“ 2014-03-07”,則它將假定為UTC時區(ES5和ECMAScript 2015)。 因此,根據系統支持的ECMAScript版本,使用這些字符串生成的Date對象可能表示不同的時刻,除非系統設置的本地時區為UTC。 這意味着看似等效的兩個日期字符串可能會導致兩個不同的值,具體取決於要轉換的字符串的格式。

請檢查此線程以獲取更多信息。

在推入DSP1和DSP2陣列之前,我將其添加進來:

var current = new Date(result[i].label); 
                var followingDay = new Date(current.getTime() + 12400000); 
                followingDay.toLocaleDateString();

我確定這不是超級准確。但是現在可以使用。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM