Chartjs v2如何在悬停线X上显示点

时间:2016-07-03 08:07:57

标签: javascript jquery chart.js

我遇到了chartjs版本2的问题,在悬停线上的显示点。 例如,在chartjs的第一个版本中它是工作https://jsfiddle.net/itcoder/am2d1qx0/ 我在chartjs网站上寻找答案,但没有结果

var selectCity = function(){
   var currentCity;
   currentCity = $(this).attr('data-city');

   $.each( subs[currentCity] ,function(index,sub){
      $('#suburbs').html( JSON.stringify( sub ), null, '\t' );
   });
}
     var ctx = document.getElementById("LineWithLine").getContext("2d")
     var config = {
            type: 'line',
            pointDotRadius: 1,
            pointHitDetectionRadius : 1,
            data: {
                labels: ["00", "01", "02", "03", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"],
                datasets: [
                    {
                        label: "new",
                        data: [1,2,3,3,3,3,3,4,5,5,6,6,6],
                        fill: false,
                        borderDash: [1, 1],
                        fillColor: "#3413e8",
                    },
                    {
                        label: "Accept",
                        data:  [2,3,4,4,4,5,4,5,5,5,5,5,5],
                        fill: false,
                        borderDash: [1, 1],
                        fillColor: "#5cb85c",
                    },
                    {
                        label: "Canceled",
                        data: [2,3,3,4,5,6,6,6,6,6,6,8,8,8,8,7,7,4,6,8,8,8,8,8,10],
                        fill: false,
                        borderDash: [1, 1],
                        fillColor: "#d43f3a",
                    },
        
                ],
        
            },
            options: {
        
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'dataset'
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Hours'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Count order'
                        }
                    }]
                },
                title: {
                    display: true,
                    text: 'Graphic new order'
                }
            }
        };
        
        $.each(config.data.datasets, function (i, dataset) {
            var background = dataset.fillColor;
            dataset.borderColor = background;
            dataset.backgroundColor = background;
            dataset.pointBorderColor = background;
            dataset.pointBackgroundColor = background;
            dataset.pointBorderWidth = 1;
        });
         new Chart(ctx, config);
        

0 个答案:

没有答案