Question

我有许多按时间x轴随机分布的点，我只想在XX：00时刻绘制刻度，保留为每个点显示单独工具提示的可能性。可能吗？

示例代码一旦需要.. https://codepen.io/zzmaster/pen/YYmMmX

var data = {
    labels: ["2012-02-02 12:03:11", "2012-02-02 12:12:11", "2012-02-02 13:10:11", "2012-02-02 14:22:11"],
    datasets: [
        {
            label: "My First dataset",
            type: 'line',
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81]
        },
    ]
};

var options = {
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                unit: 'hour',
                unitStepSize: 1,
                displayFormats: {
                    'hour': 'HH:mm'
                },
            },
            ticks:{
                source: 'labels',
                maxTicksLimit: 20,
            },
        }],
        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Loading'
            },
        }],
    },

};;

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);

Answer 1

GitHub用户etimberg回答了这个问题：

删除来源：＆＃39;标签＆＃39;并设置unitStepSize：0.5可以实现您正在寻找的东西。 https://codepen.io/anon/pen/ZrQjXr

var data = {
    labels: ["2012-02-02 12:03:11", "2012-02-02 12:12:11", "2012-02-02 13:10:11", "2012-02-02 14:22:11"],
    datasets: [
        {
            label: "My First dataset",
            type: 'line',
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81]
        },
    ]
};

var options = {
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                unit: 'hour',
                unitStepSize: 0.5,
                displayFormats: {
                    'hour': 'HH:mm'
                },
            },
            ticks:{
                maxTicksLimit: 20,
            },
        }],
        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Loading'
            },
        }],
    },

};;

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx, {
    type: 'line',
    options: options,
    data: data
})

Chart.js如何对齐x-ticks？

1 个答案: