javascript - 为折线图添加值(value)

我为显示折线图工作chartjs。现在，我需要为在线图表上的每个值鼠标添加标题/值。

Js：

    var data = {
        labels: ["February", "March", "April", "May", "June", "July"],
        datasets: [{
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            data: [ 59, 90, 81, 56, 55, 40]

        }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,1)",
            data: [ 48, 40, 59, -100, 127, 100]
        }]
    }

    var options = {animation :true};

    //Get the context of the canvas element we want to select
    var c = $('#daily-chart');
    var ct = c.get(0).getContext('2d');
    var ctx = document.getElementById("daily-chart").getContext("2d");
/*************************************************************************/

//Run function when window resizes
    $(window).resize(respondCanvas);

    function respondCanvas() {
        c.attr('width', jQuery("#daily").width());
        c.attr('height', jQuery("#daily").height());
        //Call a function to redraw other content (texts, images etc)
        myNewChart = new Chart(ct).Line(data, options);
    }

    //Initial call
    respondCanvas();

如何为每个值/月添加标题/值？

演示：jsFiddle

最佳答案

如果您使用最新版本的chart.js，则有一个新的更新允许您显示带有值/标题的工具提示。 http://www.chartjs.org/docs/

有多个选项可自定义鼠标悬停时的工具提示

// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,

// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],

// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",

// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip label font size in pixels
tooltipFontSize: 14,

// String - Tooltip font weight style
tooltipFontStyle: "normal",

// String - Tooltip label font colour
tooltipFontColor: "#fff",

// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,

// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",

// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",

// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,

// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,

// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,

// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,

// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,

// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

关于javascript - 为折线图添加值(value)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24428332/