0

我在圈子里跑来跑去，试图找到一种体面的方法来在图表的 xaxis 上获取星期日期。

在下面的小提琴中，它很容易用 dateFormats 钩子添加，但使用 Angular 我无权访问任何全局“Highcharts”对象。那么，如果将 Highcharts 与 Angular 一起使用，我该如何添加自定义格式化程序？

我尝试将格式化程序直接添加到chart.options，如下所示：

{
    dateFormats : {
    W: function (timestamp) {
        var date = new Date(timestamp),
            day = date.getUTCDay() === 0 ? 7 : date.getUTCDay(),
            dayNumber;
        date.setDate(date.getUTCDate() + 4 - day);
        dayNumber = Math.floor((date.getTime() - new Date(date.getUTCFullYear(), 0, 1, -6)) / 86400000);
        return 1 + Math.floor(dayNumber / 7);

    }
},
    title: {
        text: 'Custom date format'
    },

    xAxis: {
        type: 'datetime',
        tickInterval: 7 * 24 * 36e5, // one week
        labels: {
            format: '{value:Week %W/%Y}',
            align: 'right',
            rotation: -30
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointInterval: 7 * 24 * 36e5,
        pointStart: Date.UTC(2013, 0, 7)

    }]

}

我还尝试在我的 app.comonent 中导入 highcharts 以获取 highcharts 对象：

import * as highcharts from '../../node_modules/highcharts';

像：https ://github.com/gevgeny/angular2-highcharts/blob/master/examples/webpack/src/comboMultiAxesExample.ts

但由于我使用导致“--allowJs”未设置错误的打字稿，而且似乎过于复杂。

编辑：

使用格式化程序，您可以执行类似http://jsfiddle.net/dxyyzgar/的操作

或者：

   {
    series: data,
    legend: {enabled: true},
    xaxis: {
      type: 'datetime',
      formatter:  () => {
       return this.value
      },
      title: {
          text: 0
      }
    }
  }

但在 Angular 中，“this”引用的是当前组件，而不是 Highcharts 对象。

4

2 回答 2

0

您应该能够在将 Highcharts 传递到之前加载和编辑它，forRoot如下所述：https ://github.com/gevgeny/angular2-highcharts#access-to-the-highcharts-static-api

演示：http ://plnkr.co/edit/IJNT9VcZWp8POlXV9SC2?p=preview

于 2017-08-28T11:59:55.760 回答
0

嗨，你可以这样尝试

{
    chart: {
        type: 'line'
    },
    credits : {
      enabled : false
    },
    title: {
        text: false
    },
    xAxis: {  
        tickInterval:  7 * 24 * 3600 * 1000,
        type: 'datetime',
        startOnTick: true,
        startOfWeek: 2,
        labels: {
            format: '{value:%d/%m/%Y}',
            rotation: -45,
            y: 30,
            align: 'center'
        } 
    },
    yAxis: {
        min: 0,
        title: {
            text: 'HH'
        }
    },
    plotOptions: {
        series: {
            pointStart: Date.UTC(2012, 11, 25),#here you can mention your start date
            pointInterval: 7 * 24 * 3600 * 1000
        }
    }, 
    series: [
        {
            name: 'Curva Tardía',
            data: [18, 27, 36, 36]
        }, {
            name: 'Curva Temprana',
            data: [9, 18, 27, 27]
        },{
            name: 'Curva Real',
            data: [0, 36, 45] 
        }
    ]
}

工作示例也在那里

highcharts 周日期

于 2017-08-23T13:50:35.553 回答