[英]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"}]
在推入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.