Javascript 如何避免chart.js中值彼此接近的点重叠

我正在使用chart.js折线图和点。每当我有接近值的数据时，图像就会重叠，因为轴上的时间刻度并没有缩放。正如您可以从代码中看到的，名称为title3和title8的代码点重叠且不完全可见。是否有任何解决方案或技巧来避免重叠，以便用户可以同时看到这两个点。请参考示例

var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var eposodicimage=新图像（）；
episodicImage.src=https://image.ibb.co/gLLZ8a/episodic.png';
函数newDateString（天）{
返回时刻（）；
}
var ManualImage=新图像（）；
ManualImage.src=https://image.ibb.co/fr2p8a/user_successful.png';
var eposodicfailimage=新图像（）；
eposodicfailimage.src=https://image.ibb.co/eMGfya/episodic_failed.png';
var myChart=新图表（ctx{
键入：“行”，
数据：{
/*标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”、“粉色”]*/
数据集：[{
填充：假，
填充颜色：“rgba（2200,0）”，
strokeColor:“rgba（220180,0,1）”，
点颜色：“rgba（220180,0,1）”，
展示线：错，
点半径：20，
pointStyle:[情节图像，手动图像，情节失败图像，手动图像，情节图像，手动图像，手动图像，手动图像]，
数据：[
{x:“2015-01-20T17:07:24+07:30”，y:“04:30”，名字：“Title1”}，
{x:“2015-07-01T17:05:24+05:30”，y:“12:00”，名字：“Title2”}，
{x:“2015-12-31T17:05:24+05:30”，y:“07:00”，名字：“Title3”}，
{x:“2016-05-13T17:05:24+05:30”，y:“05:00”，名称：“Title4”}，
{x:“2016-11-13T17:05:24+05:30”，y:“03:00”，名字：“Title5”}，
{x:“2017-01-10T17:05:24+05:30”，y:“12:45”，名字：“Title6”}，
{x:“2017-09-13T17:05:24+05:30”，y:“17:00”，名字：“Title7”}，
{x:“2015-12-30T17:05:24+05:30”，y:“07:15”，名称：“Title8”}，]，
背景颜色：“FC940B”，
}]
},
选项：{
图例：{
显示：假
},
比例：{
xAxes：[{
键入：“时间”，
滴答声：{
平均轮换时间：30，
最大值：20//角度（度）
},
显示：对，
scaleLabel：{
显示：对，
标签字符串：“日期”
}
}],
雅克斯：[{
键入：“时间”，
显示：对，
贝吉纳泽罗：是的，
时间：{
格式：“HH:mm”，
单位：小时，
显示格式：{
‘hour’：‘HH:mm’，
}
}
}]
},
工具脚本模板：“”，
缩放：{
启用：对，
模式：“xy”，
限制：{
最高：10，
最低：0.5
}
}
},
});
Chart.defaults.global.tooltipYPadding=16；
Chart.defaults.global.tooltipCornerRadius=0；
Chart.defaults.global.tooltipTitleFontStyle=“正常”；
Chart.defaults.global.tooltipFillColor=“rgba（10160,10,0.8）”；
document.getElementById（“myChart”）.onclick=function（evt）{
var activePoints=myChart.getElementsAtEvent（evt）；
var firstPoint=activePoints[0]；
var value=myChart.data.datasets[firstPoint.\u datasetIndex].data[firstPoint.\u index]；
警报（“时间”+value.y+“日期”+value.x）；
console.log（value.x）；
};

Html

    var ctx = document.getElementById("myChart").getContext('2d');

var episodicImage = new Image();
    episodicImage.src ='https://image.ibb.co/gLLZ8a/episodic.png';
function newDateString(days) {

            return moment().add(days, 'd').format();
        }
var ManualImage = new Image();
    ManualImage.src ='https://image.ibb.co/fr2p8a/user_successful.png';
var EpisodicfailImage = new Image();
    EpisodicfailImage.src ='https://image.ibb.co/eMGfya/episodic_failed.png';

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
       /*  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange","Pink"], */
        datasets: [{

           fill: false,

        fillColor: "rgba(220,220,220,0)",
        strokeColor: "rgba(220,180,0,1)",
        pointColor: "rgba(220,180,0,1)",
        showLine: false,
          pointRadius : 20,

           pointStyle: [episodicImage, ManualImage, EpisodicfailImage, ManualImage, episodicImage,ManualImage,ManualImage,ManualImage], 
            data: [
              {x: "2015-01-20T17:07:24+07:30", y: "04:30",name:"Title1"},
              {x: "2015-07-01T17:05:24+05:30", y:"12:00",name:"Title2"},
              {x: "2015-12-31T17:05:24+05:30", y:"07:00",name:"Title3"},
            {x: "2016-05-13T17:05:24+05:30", y:"05:00",name:"Title4"},
            {x: "2016-11-13T17:05:24+05:30", y:"03:00",name:"Title5"},
            {x: "2017-01-10T17:05:24+05:30", y:"12:45",name:"Title6"},
            {x: "2017-09-13T17:05:24+05:30", y:"17:00",name:"Title7"},
             {x: "2015-12-30T17:05:24+05:30", y:"07:15",name:"Title8"},],
            backgroundColor: "#FC940B",
        }]
    },
    options: {
      legend: {
        display: false
    },
        scales: {
           xAxes: [{
                        type: "time",
                        ticks: {
                              minRotation:30,
                              maxTicksLimit: 20// angle in degrees
                              },

                              display: true,
                              scaleLabel: {
                                          display: true,
                                          labelString: 'Date'
                                           }
                    }],
            yAxes: [{
               type: "time",
                display: true,
               beginAtZero: true,
                 time: {
                        format: "HH:mm",
                        unit: 'hour',
                        displayFormats: {
                                        'hour': 'HH:mm', 
                                       }
                        }
            }]
        },
    tooltipTemplate: "<%= name %>",
       zoom: {
            enabled: true,
            mode: 'xy',
            limits: {
                   max: 10,
                    min: 0.5
                     }
              }
    },

});


Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(10,160,10,0.8)";
document.getElementById("myChart").onclick = function(evt){
            var activePoints = myChart.getElementsAtEvent(evt);
            var firstPoint = activePoints[0];
            var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
            alert("Time "+value.y + " Date " + value.x);
            console.log(value.x);
        };

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://npmcdn.com/Chart.Zoom.js@latest/Chart.Zoom.min.js"></script>
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>

<div style="width:90%;">
  <canvas id="myChart"></canvas>
</div>