angular - 如何在 ng2-charts 中为角度定义有关财务图表的自定义 x 轴比例？

问题描述

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

初始化图表（）{

  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();

}

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

标签： angularng2-charts

angular - 如何在 ng2-charts 中为角度定义有关财务图表的自定义 x 轴比例？

问题描述

解决方案

推荐阅读