0

我正在使用 angular 2 highchart，我想在 x 轴上显示“样条”highchart，在 x 轴上显示日期，在 y 轴上显示时间，并且我的图表线呈线性，这是因为我的两个轴都有相同的日期时间刻度。我想将这些轴分隔为日期和时间，我该怎么做

这是我的示例数据如下

[{"x":1517192498650,"y":1517192498650,"name":"GS_20180129_DailyTrades_Finception"},{"x":1517190450740,"y":1517190450740,"name":"GS_20180129_DailyTrades_Finception"}, 1517105975550,"y":1517105975550,"name":"GS_20180128_DailyTrades_Finception"},{"x":1517103307507,"y":1517103307507,"name":"GS_20180128_DailyTrades_Finception"},{6x8:" 1517017629587,"name":"GS_20180127_DailyTrades_Finception"},{"x":1517017613657,"y":1517017613657,"name":"GS_20180127_DailyTrades_Finception"},{"x":1516932898280,"1516932898280,"28y:" "GS_20180126_DailyTrades_Finception"}]

这是我在打字稿中的数据操作代码

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;
}

最后这是我绘制数据的highchart代码

 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
      }]
    };
  }

我的数据如下图所示 在此处输入图像描述

请让我知道这样做的好方法是什么。

4

0 回答 0