Chart.js中的主要刻度线格式不同

时间:2018-03-16 05:47:43

标签: javascript chart.js

我想制作常规刻度格式HH:mm和主要格式(第一天开始) - MMM D。

我的代码集https://codepen.io/zzmaster/pen/OvNdLe

var options = {
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                unit: 'hour',
                unitStepSize: 1,
                displayFormats: {
                    'hour': 'HH:mm',
                    'day': 'MMM D HH:mm'
                },
            },
            ticks:{
                maxTicksLimit: 10,
                major: {
                    unit: 'day',
                    fontColor: 'red',
                    unitStepSize: 1,
                    displayFormats: {
                        'day': 'MMM D HH:mm',
                        'hour': 'MMM D'
                    },
                },
            },
        }],

        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Loading'
            },
        }],
    },

};

看起来像主要滴答的displayFormats被忽略了吗?而且我一般不明白在displayFormats下使用多个条目的原因是什么,在哪些条件下将使用小时或日期格式?我看到输出滴答没有区别..

1 个答案:

答案 0 :(得分:0)

ticks: {
    major: {
        fontSize: 14,
        fontStyle: "bold"
    },
    callback: function(value, index, values) {
        if(values[index] !== undefined)
        {
            if(values[index].major==true)
            {
                return moment(values[index].value).format('DD/MM');
            }
            else
            {
                return value;
            }
        }
    }
}