Question

我的图表有一个奇怪的问题，日期似乎倒退了，对我做错了什么的想法。

我查看了我的文档，无法清楚地看到我做错了什么。

文档在这里：https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/formatting-date-time/

这是截图...

这是我的代码......

var chart = new CanvasJS.Chart("chartContainer", {      
backgroundColor: "#2e3037",
animationEnabled: true,
axisY :{
    includeZero: false,
    //prefix: '$',
    gridColor: '#79797c',
    labelFontSize: 16,
    labelFontColor: "#79797c",
    valueFormatString: "$#.00"
},
axisX: {
    gridColor: '#79797c',
    valueFormatString: "MM/DD/YY",
    labelAngle: -50,
    interval:1, 
    intervalType: "day", 
    labelFontColor: '#79797c',
    labelFontSize: 10,
},
toolTip: {
    //shared: "true",
    fontColor: "white",
    backgroundColor: "#6b60d4",
    content: "${y}",
},
data: [{        
    type: "area", 
    showInLegend: false,
    color: '#6b60d4',
    fillOpacity: .1,
    name: "Price at the Close of the Day",
    prefix: '$',
    markerSize: 0,        
    dataPoints: [
        {x: new Date(2018, 01, 16), y: 1050.26}, 
        {x: new Date(2018, 01, 17), y: 1024.69}, 
        {x: new Date(2018, 01, 18), y: 1012.97}, 
        {x: new Date(2018, 01, 19), y: 1037.36}, 
        {x: new Date(2018, 01, 20), y: 1150.5}, 
        {x: new Date(2018, 01, 21), y: 1049.09}, 
        {x: new Date(2018, 01, 22), y: 999.64}, 
        {x: new Date(2018, 01, 23), y: 984.47}, 
        {x: new Date(2018, 01, 24), y: 1061.78}, 
        {x: new Date(2018, 01, 25), y: 1046.37}, 
        {x: new Date(2018, 01, 26), y: 1048.58}, 
        {x: new Date(2018, 01, 27), y: 1109.08}, 
        {x: new Date(2018, 01, 28), y: 1231.58}, 
        {x: new Date(2018, 01, 29), y: 1169.96}, 
        {x: new Date(2018, 01, 30), y: 1063.75}, 
        {x: new Date(2018, 01, 31), y: 1111.31}, 
        {x: new Date(2018, 02, 01), y: 1026.19}, 
        {x: new Date(2018, 02, 02), y: 917.47}, 
        {x: new Date(2018, 02, 03), y: 970.87}, 
        {x: new Date(2018, 02, 04), y: 827.59}, 
        {x: new Date(2018, 02, 05), y: 695.08}, 
        {x: new Date(2018, 02, 06), y: 785.01}, 
        {x: new Date(2018, 02, 07), y: 751.81}, 
        {x: new Date(2018, 02, 08), y: 813.55}, 
        {x: new Date(2018, 02, 09), y: 877.88}, 
        {x: new Date(2018, 02, 10), y: 850.75}, 
        {x: new Date(2018, 02, 11), y: 811.24}, 
        {x: new Date(2018, 02, 12), y: 865.27}, 
        {x: new Date(2018, 02, 13), y: 840.98}, 
        {x: new Date(2018, 02, 14), y: 888.82}
    ]
}]
});
chart.render();

Answer 1

在JavaScript日期对象中，月份从0（对于Jan）到11（对于Dec）开始。有关详细信息，请参阅MDN。

在您的情况下，由于存在x值package de.scrum_master.stackoverflow import geb.spock.GebReportingSpec class DateFormatTimeZoneIT extends GebReportingSpec { def "Check texts for selected drop-down elements"() { given: def page = to DateFormatTimeZonePage when: "selecting drop-down elements by unique value" page.modalDateDropdown = "DD/MM/YYYY" page.modalTZoneDropdown = "US/Samoa" then: "corresponding texts match" page.modalDateDropdown.selectedText == "DD/MM/YYYY" page.modalTZoneDropdown.selectedText == "GMT -11:00, Samoa Time Samoa" when: "selecting drop-down default element with non-unique value by text" page.modalTZoneDropdown = "- Select time zone -" then: "corresponding value matches" page.modalTZoneDropdown.selected == "America/Chicago" when: "selecting another drop-down element with non-unique value by text" page.modalTZoneDropdown = "GMT -06:00, Central Time (Chicago)" then: "corresponding value matches" page.modalTZoneDropdown.selected == "America/Chicago" } }，new Date(2018, 01, 29)，new Date(2018, 01, 30)，因此它分别对应于3月1日，2日和3日。并且来自new Date(2018, 01, 31)的x值再次对应于3月1日。 3月3日之后不久（即new Date(2018, 02, 01)）再次切换回3月1日（即new Date(2018, 01, 31)）。

在这种情况下，对月份进行相应的更改可以正常工作。以下是工作代码：

new Date(2018, 02, 01)

var chart = new CanvasJS.Chart("chartContainer", {      
backgroundColor: "#2e3037",
animationEnabled: true,
axisY :{
    includeZero: false,
    //prefix: '$',
    gridColor: '#79797c',
    labelFontSize: 16,
    labelFontColor: "#79797c",
    valueFormatString: "$#.00"
},
axisX: {
    gridColor: '#79797c',
    valueFormatString: "MM/DD/YY",
    labelAngle: -50,
    interval:1, 
    intervalType: "day", 
    labelFontColor: '#79797c',
    labelFontSize: 10,
},
toolTip: {
    //shared: "true",
    fontColor: "white",
    backgroundColor: "#6b60d4",
    content: "${y}",
},
data: [{        
    type: "area", 
    showInLegend: false,
    color: '#6b60d4',
    fillOpacity: .1,
    name: "Price at the Close of the Day",
    prefix: '$',
    markerSize: 0,        
    dataPoints: [
        {x: new Date(2018, 00, 16), y: 1050.26}, 
        {x: new Date(2018, 00, 17), y: 1024.69}, 
        {x: new Date(2018, 00, 18), y: 1012.97}, 
        {x: new Date(2018, 00, 19), y: 1037.36}, 
        {x: new Date(2018, 00, 20), y: 1150.5}, 
        {x: new Date(2018, 00, 21), y: 1049.09}, 
        {x: new Date(2018, 00, 22), y: 999.64}, 
        {x: new Date(2018, 00, 23), y: 984.47}, 
        {x: new Date(2018, 00, 24), y: 1061.78}, 
        {x: new Date(2018, 00, 25), y: 1046.37}, 
        {x: new Date(2018, 00, 26), y: 1048.58}, 
        {x: new Date(2018, 00, 27), y: 1109.08}, 
        {x: new Date(2018, 00, 28), y: 1231.58}, 
        {x: new Date(2018, 00, 29), y: 1169.96}, 
        {x: new Date(2018, 00, 30), y: 1063.75}, 
        {x: new Date(2018, 00, 31), y: 1111.31}, 
        {x: new Date(2018, 01, 01), y: 1026.19}, 
        {x: new Date(2018, 01, 02), y: 917.47}, 
        {x: new Date(2018, 01, 03), y: 970.87}, 
        {x: new Date(2018, 01, 04), y: 827.59}, 
        {x: new Date(2018, 01, 05), y: 695.08}, 
        {x: new Date(2018, 01, 06), y: 785.01}, 
        {x: new Date(2018, 01, 07), y: 751.81}, 
        {x: new Date(2018, 01, 08), y: 813.55}, 
        {x: new Date(2018, 01, 09), y: 877.88}, 
        {x: new Date(2018, 01, 10), y: 850.75}, 
        {x: new Date(2018, 01, 11), y: 811.24}, 
        {x: new Date(2018, 01, 12), y: 865.27}, 
        {x: new Date(2018, 01, 13), y: 840.98}, 
        {x: new Date(2018, 01, 14), y: 888.82}
    ]
}]
});
chart.render();

CanvasJS图表时间倒退？

1 个答案: