限制 Highcharts x 轴分组类别和标签样式答案

【问题标题】：limit Highcharts x-Axis grouped categories and labels style限制 Highcharts x 轴分组类别和标签样式
【发布时间】：2015-06-18 10:08:53
【问题描述】：

我正在尝试绘制如下图表，但 x 轴在第 11 年年底停止，目前它没有。我将最大值设置为 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',
            },
...

强文本

【问题讨论】：

标签： css highcharts

【解决方案1】：

m 和 l 参数是否不变？或者你能改变它们吗？如果是，那么请看：http://jsfiddle.net/TFhd7/373/

简而言之：类别在类别索引中保留从 -0.5 到 0.5 的位置。例如 Year7 -> 4 表示从 3.5 到 4.5 的 x 值。因此，根据这些信息，让我们更改该值：

var l = 19.5;
var m = -0.5;

现在修改extremes和plotLines：

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

【讨论】：