시계열 스트림, x축 및 24시간 형식에서 am/pm 제거

시계열 스트림, x축 및 24시간 형식에서 am/pm 제거

모멘트 js docs에서 설명한 것처럼 2차 정밀도 HH:mm:ss(24시간/일) 형식의 시계열을 그리려고 합니다.

문제는 제가 선언한 형식이 존중되지 않는다는 것입니다.저는 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/vue-chartjs@2.6.5/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>

거의 다 온 것 같은데, 세부사항을 놓치고 있는 것 같아.
JSFIDLE: https://jsfiddle.net/ue1x8079/

시간축 라벨 포맷을 위한 이 구조를 지정하기 위해 링크한 Chart.js 문서:

time: {
    displayFormats: {
        quarter: 'MMM YYYY'
    }
}

포맷을 삽입하면 다음과 같이 됩니다.

time: {
    displayFormats: {
        second: this.timeFormat
    }
}

네 말이 맞았어, 아주 사소한 부분일 뿐이야!(업데이트된 바이올린).

언급URL : https://stackoverflow.com/questions/55646893/time-series-stream-removing-am-pm-on-x-axis-and-24-hour-format