我正在尝试以秒精度绘制时间序列，格式为HH：mm：ss（24小时/天），如一下js docs中所述。
问题是我声明的格式没有得到遵守，我尝试了Chartsjs文档中的几种组合，但没有一种有效。
Vue.component('line-chart', {
extends: VueChartJs.Line,
mixins: [VueChartJs.mixins.reactiveProp],
props: ['chartData', 'timeFormat'],
data() {
return {
options: {
animation: false,
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
time: {
format: this.timeFormat
}
}],
},
}
}
},
mounted () {
this.renderChart(this.chartData, this.options);
}
})
var vm = new Vue({
el: '.app',
data() {
return {
chart: {},
timeFormat: 'HH:mm:ss',
timeout: null,
len_data: 20
}
},
created () {
this.change_data();
},
methods: {
change_data: function() {
this.chart = this.fillData();
this.timeout = setTimeout(this.change_data, 1000);
},
fillData () {
return {
labels: this.get_labels(),
datasets: [{
fill: false, // line
pointRadius: 2, // line
borderWidth: 2, // line
borderColor: "rgba(25, 25, 125, 1)",
data: this.get_nums(0),
label: "Points"
}]
}
},
get_labels() {
return Array.from({length: this.len_data}, (v, k) => this.newDateString(this.len_data-k));
},
get_nums(data_idx) {
if(typeof this.chart.datasets !== 'undefined') {
this.chart.datasets[data_idx].data.shift(); // removing the first item
this.chart.datasets[data_idx].data.push(this.getRandomInt()); // adding a new one
return this.chart.datasets[data_idx].data;
}
return Array.from({length: this.len_data}, (v, k) => this.getRandomInt());
},
getRandomInt () {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
},
newDateString(seconds) {
return moment().subtract(seconds, 's').format(this.timeFormat);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-chartjs.full.min.js"></script>
<div class="app">
<line-chart :chart-data="chart" :time-format="timeFormat" width="400" height="200"></line-chart>
<br>{{chart.datasets[0].data}}
</div>我想我快要到了，我敢打赌我只是缺少了一些细节。
JSFIDDLE：https：//jsfiddle.net/ue1x8079/
您链接用来指定此结构以格式化时间轴标签的Chart.js文档：
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
因此插入您的格式将变成：
time: {
displayFormats: {
second: this.timeFormat
}
}
您说得对，只是一个很小的细节！（更新的小提琴）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句