Question

我正在使用角度2高图，我想展示＆＃39; spline＆＃39;在x轴上的日期和y轴上的时间以及我的图表线为线性的高图，因为我对两个轴都有相同的日期时间刻度。我想将这些轴隔离为日期和时间，我该怎么做

这是我的样本数据，如下所示

[{＆＃34; X＆＃34;：1517192498650，＆＃34; Y＆＃34;：1517192498650，＆＃34;名称＆＃34;：＆＃34; GS_20180129_DailyTrades_Finception＆＃34;}，{＆＃34 ; X＆＃34;：1517190450740，＆＃34; Y＆＃34;：1517190450740，＆＃34;名称＆＃34;：＆＃34; GS_20180129_DailyTrades_Finception＆＃34;}，{＆＃34; X＆＃34;：1517105975550，＆＃34; Y＆＃34;：1517105975550，＆＃34;名称＆＃34;：＆＃34; GS_20180128_DailyTrades_Finception＆＃34;}，{＆＃34; X＆＃34;：1517103307507，＆＃34; Y＆＃34; ：1517103307507，＆＃34;名称＆＃34;：＆＃34; GS_20180128_DailyTrades_Finception＆＃34;}，{＆＃34; X＆＃34;：1517017629587，＆＃34; Y＆＃34;：1517017629587，＆＃34;名称＆＃34;：＆＃34; GS_20180127_DailyTrades_Finception＆＃34;}，{＆＃34; X＆＃34;：1517017613657，＆＃34; Y＆＃34;：1517017613657，＆＃34;名称＆＃34;：＆＃34; GS_20180127_DailyTrades_Finception＆＃34;}，{＆＃34; X＆＃34;：1516932898280，＆＃34; Y＆＃34;：1516932898280，＆＃34;名称＆＃34;：＆＃34; GS_20180126_DailyTrades_Finception＆＃34;}]

这是我在typescript中的数据操作代码

static PrepareFileTransactionsForDateTimeChart(fileTransactions: Array<FileTransactionViewModel>) {
    const formattedFileTransactions = new Array<any>();
    fileTransactions.forEach((_fileTransaction: FileTransactionViewModel) => {
        const data = {
            x: moment(_fileTransaction.DateTime).valueOf(),
            y: moment(_fileTransaction.DateTime).valueOf(),
            // x: moment(moment(_fileTransaction.DateTime).format('DD-MM-YYYY') + ' 12:00:00').valueOf(),
            // y: moment('01-01-2018 ' + moment(_fileTransaction.DateTime).format('HH:MM:SS')).valueOf(),
            name: _fileTransaction.FileName
        };
        formattedFileTransactions.push(data);
    });
    return formattedFileTransactions;
}

最后这是我的高图代码，我正在绘制数据

 async AppendChartData(data: any) {
    this.options = {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'File transactions overview'
      },

      subtitle: {
        text: ''
      },

      xAxis: {
        type: 'datetime',
        title: {
          text: 'Date'
        },
        labels: {
          format: '{value:%e-%b-%Y}'
        },
      },

      yAxis: {
        type: 'datetime',
        title: {
          text: 'Time'
        },
        labels: {
          format: '{value:%H:%M:%S}'
        },
      },

      tooltip: {
        headerFormat: '',
        pointFormat: '<b>{point.name}: </b> <br><br> {point.x:%e-%b-%Y} {point.y:%H:%M:%S}',
        followPointer: true,
        enabled: true,
        shadow: false
      },

      plotOptions: {
        spline: {
          lineWidth: 4,
          states: {
            hover: {
              lineWidth: 5
            }
          },
          marker: {
            enabled: false
          },
        }
      },

      series: [{
        name: 'File Transaction',
        data: data
      }]
    };
  }

我的数据如下图所示 enter image description here

请告诉我这样做的好方法。

如何显示＆＃39; spline＆＃39; x轴上的日期和y轴上的时间的高图？

0 个答案: