Chart.js自定义工具提示以显示更多数据

时间:2016-04-27 11:09:08

标签: svg chart.js

我正在使用Chart.js 2.0 公式:失败率:失败计数/总计数。 我有一个故障率,故障计数和总数的阵列。

在折线图中绘制组件相对于时间的故障率是直截了当的,但现在我还希望在用户将鼠标悬停在工具提示上时显示故障计数和总计数。我无法弄清楚如何自定义它。

我们有e.time,e.count,e.failure_count,e.rate

 new Chart(document.getElementById(event_id).getContext("2d"), {type: "line", data: 
                    {
                        labels:  e.time,
                        datasets: [

                            {
                                label: "Failure Rate",
                                fill: false,
                                borderColor: "#4caf50",
                                backgroundColor: "#4caf50",
                                pointBorderWidth: 1,
                                pointHoverRadius: 3,
                                data: e.rate
                            }
                        ]
                    }, options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    suggestedMin: -1,
                                    suggestedMax: 6
                                }   
                            }] 
                        },
                        tooltips: {
                            custom: function(tooltip) {
                                tooltip.text= "Not working????"
                            }
                        }
                    }
                });

1 个答案:

答案 0 :(得分:2)

在2.0中,回调需要返回。 基本上你想要做的是:

custom: function(tooltip) {
    tooltip.text= "Not working????"
}

通过

callbacks: {
    label: function(tooltipItem, data) { return "What you want as a tooltip" }
}