如何将高级图表格式化为数周?

时间:2016-07-11 06:31:37

标签: jquery highcharts

我使用以下代码格式化高级图表中的日期 - return Highcharts.dateFormat('%e. %b',new Date(this.value));

但它返回的值为 - 1.jan , 1.feb.

但我希望将其转换为 - week1, week4, week8

更新我的图表完整代码:

$(function () {   

var projects = ['Tire Sales', 'Spark Plug', 'Hoods & Moff','Audio System','Accessories'];

$('#ao-projectssummry-chart').highcharts({
    chart: {
        type: "columnrange",
        inverted: true,
        marginLeft: 300
    },
    title: {
        text: null
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%e. %b', new Date(this.x));
        }
    },
    yAxis: {
        title: null,
        crosshair: {
            width: 2,
            color: "#F26C6D",
            snap: true,
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%e. %b', new Date(this.x));
            }
        },
        labels: {
            formatter: function(){
                return Highcharts.dateFormat('%e. %b',new Date(this.value));
            }
        },
        gridLineWidth: 1,
        gridZIndex: 0,
        type: 'datetime',
        min: Date.UTC(2016, 0, 1),
        max: Date.UTC(2016, 12, 31),
    },
    xAxis: {            
        categories: [
           'Model', 'Optimize', 'Pilot', 'Deploy', 'Monitor'
        ],
        min: 0,
        max:4,
        title: null,
        gridLineWidth: 1,
        gridZIndex: 0,

        labels: {
            width: 200,
            marginLeft: 0,
            useHTML: true,
            formatter: function () {
                return '<div class="ProjectListsrow"><span class="ao-projectname">'+ projects[this.axis.categories.indexOf(this.value)] + '</span><span class = "ao-projectstatus-label ao-'+ this.value + '">' + this.value +'</span> <span class="ao-projecttype-icon">'+  +' </span>   </div>'
            }         
        },
        events: {
            mouseOver: function () {
                console.log('over');
                },

            click: function () {
                return projects[this.axis]
            }
        },

        crosshair: {
            snap: true
        }
    },
    plotOptions: {
        series: {
            pointWidth: 4,
            borderRadius: 0,
            marker: {
                enbled: false
            }

        },
        line: {
            lineWidth: -1,
            marker: {
                enabled: true,
                radius: 0,
                symbol: 'circle'
            }

        }
    },
    series: [
        {                
            data: [{
                x: 0.10,
                low: Date.UTC(2016, 0, 15),
                high: Date.UTC(2016, 2, 15),
                color: "#60B3D1"
            }, {
                x: 0.10,
                low: Date.UTC(2016, 2, 15),
                high: Date.UTC(2016, 4, 24),
                color: "#60B3D1"
            }, {
                x: 0.10,
                low: Date.UTC(2016, 4, 7),
                high: Date.UTC(2016, 6, 15),
                color: "#9CCB01"
            }, {
                x: 0.10,
                low: Date.UTC(2016, 6, 7),
                high: Date.UTC(2016, 8, 15),
                color: "#9CCB01"
            }, {
                x: 0.10,
                low: Date.UTC(2016, 8, 7),
                high: Date.UTC(2016, 10, 15),
                color: "#9CCB01"
            }]
        },
        {
            type: 'line',
            data: [
                {
                    x: 0.10,
                    y: Date.UTC(2016,2,15),
                    marker: {                        
                        symbol: 'url(/../Content/Img/monitor.png)',                           
                    }
                },
                {
                    x: 0.10,
                    y: Date.UTC(2016,4,10),
                    marker: { 
                        symbol: 'url(/../Content/Img/optimize.png)',
                    }
                },
                {
                    x: 0.10,
                    y: Date.UTC(2016,6,15),
                    marker: { 
                        symbol: 'url(/../Content/Img/pilot.png)',
                    }
                },
                {
                    x: 0.10,
                    y: Date.UTC(2016, 8, 5),
                    marker: {
                        symbol: 'url(/../Content/Img/model.png)',
                    }
                },
                {
                    x: 0.10,
                    y: Date.UTC(2016, 10, 15),
                    marker: {
                        symbol: 'url(/../Content/Img/deploy.png)',
                    }
                }

            ]
        }

    ]
});

});

帮助将不胜感激!!提前谢谢!!

0 个答案:

没有答案