reactjs - react-chartjs-2 时间刻度日期不格式化

Question

我只是在快速了解 chart.js 的 react 。我在设置日期格式时遇到问题。这是我的代码:

var data = {
    labels: labelArray,
    title: {
        text: "Date Time Formatting"
    },
    datasets: [{
        label: 'Temperature',
        data: dataArray,
        tension: 0,
        borderColor: "rgb(248,169,113)",
        backgroundColor: "rgba(0,0,0,0)",
        radius: 0,
        borderWidth: 1,
        pointHitRadius: 5
    }]
};
var options = {
    title: "This is a test",
    xAxes: {
        title: "time",
        gridThickness: 2,
        unit: "day",
        unitStepSize: 1000,
        type: 'time',
        time: {
            displayFormats: {
                millisecond: 'MMM DD',
                second: 'MMM DD',
                minute: 'MMM DD',
                hour: 'MMM DD',
                day: 'MMM DD',
                week: 'MMM DD',
                month: 'MMM DD',
                quarter: 'MMM DD',
                year: 'MMM DD',
            }
        }
    }
}
class LineExample extends(Component) {
    componentWillMount() {
        let json = getJSONObject();
    }
    render() {
        // console.log ("Labels: " + labelArray);
        return (<div>
            <h2>Line Example</h2>
            <Line data={data} options={options}/>
        </div>);
    }
};
class LineExample extends(Component) {
    componentWillMount() {
        let json = getJSONObject();
    }
    render() {
        // console.log ("Labels: " + labelArray);
        return (<div>
            <h2>Line Example</h2>
            <Line data={data} options={options}/>
        </div>);
    }
};

似乎这些选项可能无法正常工作(但这只是一个猜测)。

这是输出，x 轴上的日期是完整的日期时间字符串。这是一张图片:

Answer 1

根据react-chartjs-2 ( https://github.com/gor181/react-chartjs-2/blob/master/src/index.js ) 的 renderChart 方法，options 属性直接传递给 Chart 以创建实例。当您将选项传递给 chartjs 时，与刻度相关的选项需要嵌套在键刻度下，然后分别嵌套在 time 和 gridLines 键下。像这样

 var options = {
        title: {text: "This is a test"},
        scales: {
            xAxes: [{
                title: "time",
                type: 'time',
                gridLines: {
                    lineWidth: 2
                },
                time: {
                    unit: "day",
                    unitStepSize: 1000,
                    displayFormats: {
                        millisecond: 'MMM DD',
                        second: 'MMM DD',
                        minute: 'MMM DD',
                        hour: 'MMM DD',
                        day: 'MMM DD',
                        week: 'MMM DD',
                        month: 'MMM DD',
                        quarter: 'MMM DD',
                        year: 'MMM DD',
                    }
                }
            }]
        }
    }

如果您打算使用“天”作为单位，您可能需要调整 unitStepSize。