Question

我正在快速掌握chart.js的反应速度。我在获取日期格式方面遇到了问题。这是我的代码：

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轴上的日期是完整的日期时间字符串。这是一张图片：

enter image description here

Answer 1

根据react-chartjs-2（check the python docs）的renderChart方法，选项prop直接传递给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',
                    }
                }
            }]
        }
    }

如果您计划使用＆＃39; day＆＃39;您可能需要调整unitStepSize。作为单位。

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

1 个答案: