Angular 如何在ng2图表中定义有关财务图表的自定义x轴比例？

这是我的代码，我在传递Y轴上的值，X轴上有时间。我们需要显示时间，如下午12点、下午1点、下午2点，间隔一小时。但它准确地显示了来自api的时间，比如9:30am，9:35am。。。。。？请帮忙

initChart（）{

}

这是结果，但x轴未如下图所示显示

---

我使用了chart js而不是ng2图表，它是免费的，开源的

跟随链接

在角度范围内，我们可以轻松使用。请点击下面的链接

---

我使用了chart js而不是ng2图表，它是免费的，开源的

跟随链接

在角度范围内，我们可以轻松使用。请点击下面的链接

  this.lineChartData= [
    { data: this.PriceData, label: this.symbolName,lineTension: 0,fill:false },
    
  ];
   this.lineChartLabels= this.TimeData;
   this.lineChartOptions = {
    responsive: true,
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      xAxes: [{
        display: true,
        type: 'time',
        distribution: 'series',
        gridLines: {
            display: true
        },
        time: {
            displayFormats: {
                millisecond: 'h:mm:ss a',
                second: 'h:mm:ss a',
                minute: 'h:mm a',
                hour: 'h a',
                day: 'D MMM, h:mm a',
                week: 'll',
                month: 'll',
                quarter: 'll',
                year: 'll'
            },
            unit:"hour"
        },
        ticks: {
            autoSkip: true,
            maxTicksLimit: 15
        }
      }],
      yAxes: [
        {
          id: 'y-axis-0',
          position: 'left',
          
        },
        
        
      ]
    },
    pan: {
        enabled: true,
        mode: 'xy',
        rangeMin: {
          // Format of min pan range depends on scale type
          x: null,
          y: null
        },
        rangeMax: {
          // Format of max pan range depends on scale type
          x: null,
          y: null
        },
        // Function called once panning is completed
        // Useful for dynamic data loading
        onPan: function (e) { console.log(`I was panned!!!`, e); }
      },
      zoom: {
        enabled: true,
        drag: false,
  
        // Drag-to-zoom rectangle style can be customized
        // drag: {
        //   borderColor: 'rgba(225,225,225,0.3)'
        //   borderWidth: 5,
        //   backgroundColor: 'rgb(225,225,225)'
        // },
  
        // Zooming directions. Remove the appropriate direction to disable
        // Eg. 'y' would only allow zooming in the y direction
        mode: 'xy',
  
        rangeMin: {
          // Format of min zoom range depends on scale type
          x: null,
          y: null
        },
        rangeMax: {
          // Format of max zoom range depends on scale type
          x: null,
          y: null
        },
  
        // Speed of zoom via mouse wheel
        // (percentage of zoom on a wheel event)
        speed: 0.1,
  
        // Function called once zooming is completed
        // Useful for dynamic data loading
        onZoom: function ({ chart }) { console.log(`I was zoomed!!!`); }
      }
    
  };
  this.lineChartColors= [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // red
      backgroundColor: 'rgba(255,0,0,0.3)',
      borderColor: 'red',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  
  this.getIntervalData();