如何在工具提示chart.js周围显示边框并在工具提示标题中显示y轴整数值以及文本?

时间:2018-04-12 07:46:17

标签: javascript tooltip chart.js

我正在使用chart.js绘制折线图并在图形上显示工具提示。但是我无法在工具提示和标题周围绘制边框我希望将文本和当前y轴值显示为标题(例如。总计数:2但不是2它显示undefined.Now我从标题回调中删除了代码)。我正在尝试很多天,但仍然没有运气。请帮我。这是我的代码

var ctx = document.getElementById("myChart").getContext('2d');          
var myChart = new Chart(ctx, {
       type: 'line',
       data: {
            labels:["a","b","c"],
            datasets: [{                    
                label: 'Total count',
                lineTension: 0,
                data: [2,4,6],
                fill: false,
                borderColor: 'rgba(39,50,139,1)',
                pointBackgroundColor:'rgba(176,179,214,1)',
                pointBorderColor:'rgba(39,50,139,1)',
                pointRadius:5,
                pointHoverBackgroundColor:'rgba(39,50,139,1)',
                borderWidth:2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend:{
                display:false
            },
            chartArea: {
                backgroundColor: '#fff'
            },
            scales: {                   
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        maxTicksLimit:3
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display: false,
                        color: "black"
                      },
                    ticks: {
                        max:12,
                        maxTicksLimit:12
                    }
                }]
            },              
            tooltips: {
                callbacks: {                        
                  title:function(tooltipItem, data) {                         
                  },
                  afterLabel: function(tooltipItem, data) {                      
                     return userNamesResult[tooltipItem.index];                       
                   }
                },
                titleSpacing:0,
                titleMarginBottom:0,
                titleFontColor:'#000',
                backgroundColor: '#f2f3f4',
                bodyFontColor: '#000',
                //bodyFontStyle:'bold',
                bodyFontSize: 14,
                displayColors: false,                   
                borderColor:'#ff0000',
                borderWidth:5,                  
              } 
         }
    });

0 个答案:

没有答案