javascript - 当宽度拉伸时，Canvas.js 显示 12AM（奇怪的错误）

Question

当我将鼠标悬停在这些点上时，为什么canvas.js图表的工具提示显示“12:00AM：0.0645840023”？

JSFiddle：http: //jsfiddle.net/ssjqoa64/2/

如果我扩展容器/窗口宽度，它会显示 12AM bug。极其诡异的bug。

它应该显示日期。

window.onload=function () {
    CanvasJS.addColorSet("colset", ["#337ab7"]);
    var chart=new CanvasJS.Chart("chartContainer", {
        colorSet: "colset", backgroundColor: "#f5f5f5", zoomEnabled: true, exportEnabled: true, exportFileName: "Earnings Chart", axisX: {
            labelFontFamily: "tahoma"
        }
        , axisY: {
            labelFontFamily: "tahoma",
        }
        , data: [ {
            type: "area", dataPoints: [ {
                x: new Date(2015, 12, 29), y: 0.016440000385046
            }
            , {
                x: new Date(2015, 12, 30), y: 0.064584002396259
            }
            , {
                x: new Date(2015, 12, 31), y: 0.0098100002505817
            }
            , {
                x: new Date(2016, 1, 1), y: 0.34803301144257
            }
            , {
                x: new Date(2016, 1, 2), y: 0.20135760693211
            }
            , ]
        }
        ]
    }
    );
    chart.render();
}

Answer 1

看起来当xAxis更改为更小的粒度（即：从日期更改为时间）时，工具提示格式会更改为匹配。

解决方案是根据文档使用自定义工具提示功能。

请在这个 fiddle找到一个可行的解决方案。

新的 JavaScript：

CanvasJS.addColorSet("colset", ["#337ab7"]);
var chart=new CanvasJS.Chart("chartContainer", {
    colorSet: "colset", backgroundColor: "#f5f5f5", zoomEnabled: true, exportEnabled: true, exportFileName: "Earnings Chart", axisX: {
        labelFontFamily: "tahoma"
    }
    , toolTip: { // THIS IS NEW
        contentFormatter: function(e) {
            var date = e.entries[0].dataPoint.x;
            var value = e.entries[0].dataPoint.y;
            return CanvasJS.formatDate(date, "MMM DD YYYY") + ": " + value;
        }
    } // END OF NEW
    , axisY: {
        labelFontFamily: "tahoma"
    }
    , data: [ {
        type: "area", dataPoints: [ {
            x: new Date(2015, 12, 29), y: 0.02
        }
        , {
            x: new Date(2015, 12, 30), y: 0.06
        }
        , {
            x: new Date(2015, 12, 31), y: 0.01
        }
        , {
            x: new Date(2016, 1, 1), y: 0.35
        }
        , {
            x: new Date(2016, 1, 2), y: 0.21
        }
        , ]
    }
    ]
}

);
chart.render();