限制Highcharts x-Axis分组的类别和标签样式

时间:2015-06-18 10:08:54

标签: css highcharts

我正在尝试绘制如下图表,但x轴在第11年结束时停止,此时它不会。我将max设置为19但是没有用。在11年级结束后如何摆脱那些灰线?

对于x轴标签,我想减小第二类([1,2,3,4])的字体大小和使用较大字体的年份,但在标签样式中,字体大小属性适用于所有标签。

var l=19;
var m=-0.6;

new Highcharts.Chart({
            chart: {
                renderTo: elementId,
                spacingLeft: 10,
                spacingRight: 10
            },
            title: {
                text: subject
            },
            xAxis: {
                categories: [{
                    name: "Year 7",
                    categories: [1, 2, 3, 4]
                }, {
                    name: "Year 8",
                    categories: [1, 2, 3, 4]
                }, {
                    name: "Year 9",
                    categories: [1, 2, 3, 4]
                }, {
                    name: "Year 10",
                    categories: [1, 2, 3, 4]
                }, {
                    name: "Year 11",
                    categories: [1, 2, 3, 4]
                }],
                labels: {
                    style: {
                        fontSize: '7.5px'
                    }
                },
                plotLines: [{
                    color: '#5DA06E',
                    width: 2,
                    value: l
                }, {
                    color: '#5DA06E',
                    width: 2,
                    value: -1
                }],
                //max: l
            },

            yAxis: [{
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                min: 0,
                max: 1000
            },
                {
                    title: {
                        text: null
                    },
                    labels: {
                        style: {
                            fontSize: '7.5 px'
                        },
                        align: 'left',
                        x: 3,
                        formatter: function () {
                            var value = change[this.value];
                            return value !== 'undefined' ? value : this.value;
                        }
                    },
                    tickPositions: [0, 280, 360, 440, 520, 600, 680, 760, 840, 920, 1000],
                    gridLineColor: 'white',
                    opposite: true,
                    min: 0,
                    max: 1000
                }],

            series: [{
                type: 'line',
                data: [[m, 0], [l, 280]],
                color: '#A5DEC1',
            }, {
                type: 'line',
                data: [[m, 80], [l, 360]],
                color: '#94D0A3',
            },
...

enter image description here 强文

1 个答案:

答案 0 :(得分:1)

ml参数是否不变?或者你可以改变它们吗?如果是,请参阅:http://jsfiddle.net/TFhd7/373/

简而言之:类别使用类别索引保留从-0.5到0.5的位置。例如,Year7 - > 4表示x值从3.5到4.5。所以根据这些信息,让我们改变这些价值观:

var l = 19.5;
var m = -0.5;

现在修改极值和plotLines:

        plotLines: [{
            color: '#5DA06E',
            width: 2,
            value: l
        }, {
            color: '#5DA06E',
            width: 2,
            value: m
        }],
        max: l - 0.5,
        min: m + 0.5,