0

ポイントにカーソルを合わせると、 canvas.jsグラフのツールチップに「12:00AM: 0.0645840023」と表示されるのはなぜですか?

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

コンテナ/ウィンドウの幅を広げると、 12AM 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();
}
4

1 に答える 1

1

xAxisがより小さな粒度に変更されている場合 (IE: 日付から時刻への変更)、ツールチップの形式が一致するように変更されているように見えます。

解決策は、ドキュメントに従ってカスタム ツールチップ関数を使用することでした。

この 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();
于 2016-01-02T12:59:23.803 に答える