如何使用Highcharts在x轴上仅显示月末日期

时间:2016-10-04 15:58:24

标签: javascript highcharts coldfusion

我有一张Highcharts折线图,它使用查询内容来获取数据。数据可以超过一个月,三个月,年初至今或十二个月,并包含日期和货币价值。如果数据跨越一个月以上,则仅包含月结束日期。如何让x轴标签仅使用月末日期?它似乎默认使用12个月和年初至今的数据,但三个月的数据包含过去几个月的过多日期和日期。代码发布在下面。

<script type="text/javascript">
$(document).ready(function () {
  // default options
    var options = {
        chart: {
            renderTo: '#arguments.divMktValues#',
            type: 'area', 
            width: $("###arguments.divMktValues#").width(),
            height: Math.max(200, $("###arguments.tableMktValues#").height()),
            spacingRight: 0,
            spacingLeft: 0,
            spacingBottom: 5,
            spacingTop: 4
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false              
        },
        plotOptions: {
            area: {
                animation: true,
                dashStyle: "solid",
                marker: {enabled: true},


            }
        },
        tooltip: {
            formatter: function() {
                return '' + this.key +': '+ this.point.y_formatted;
            }
        },
        credits: {
            enabled: false
        },
        series: [
            {
                data: [
                    <cfoutput query="arguments.qryMktValues">
                        {
                            name: '#DateFormat(dt, "mm/dd/yyyy")#',
                            y_formatted: '#NumberFormat(mkt_val, "$,.00")#',
                            y: #mkt_val#,
                            x: Date.UTC(#DateFormat(dt, "yyyy")#, #DateFormat(dt, "m") - 1#,#DateFormat(dt, "d")#,0,0,0)
                        }<cfif CurrentRow neq RecordCount>,</cfif>
                    </cfoutput>
                    ]
            }
        ],
        xAxis: {
            type: 'datetime',
            gridLineWidth: 1,
            dateTimeLabelFormats: {
                day: '%m/%d/%y',            
                week: '%m/%d/%y',
                month: '%m/%d/%y'
            },
            labels: {
                    overflow: 'justify',
                    rotation: -45,
                    align: 'right',
                    formatter: function() {
                        var d = new Date(this.value); 
                        var dstr = d.toLocaleDateString();
                        return dstr.slice(0,-4) + dstr.substr(dstr.length - 2);                            
                    }
            }
        },
        yAxis: {
            title: {text:'Market Value'},
            gridLineWidth: 1,
            labels: {
                y: 8,
                formatter: function() { 
                    if (this.value >= 1000000) {
                    return '$' + (this.value / 1000000) + 'M';
                    }
                    else {
                        return '$' + this.value;    
                    }
                }
            }
        }
    };

    var chart1 = new Highcharts.Chart(options);
});

</script>

0 个答案:

没有答案