2

Highchartsを使用していますが、テーマにx軸ラベルスタイルを適用するのに問題があります...グラフを作成するときに適用すると正しく機能します。ただし、テーマオプションはx軸に対してのみ無視されるようです。同じスタイルがy軸に対して正しく機能します。

以下のコード。ありがとう！

テーマ

Highcharts.theme = {
    chart: {
        zoomType: 'x'
    },
    plotOptions: {
        column: {
            borderColor: null,
            borderWidth: 1,
            borderRadius: 3,
            shadow: true
        },
        line: {
            lineWidth: 3,
            shadow: false,
            marker: {
                radius: 10
            }
        }
    },
    xAxis: {
        gridLineColor: '#ebebeb',
        lineColor: '#ebebeb',
        minorGridLineColor: '#ebebeb',
        tickColor: '#ebebeb',
        plotLines: [{
            color: '#ebebeb'
        }],
        showLastLabel: true,
        labels: {
            style: {
                color: '#525151',
                font: '12px Helvetica',
                fontWeight: 'bold'
            },
            formatter: function () {
                return this.value;
            }
        },
        title: {
            text: "TEST"
        }
    },
    yAxis: {
        gridLineColor: '#ebebeb',
        lineColor: '#ebebeb',
        minorGridLineColor: '#ebebeb',
        tickColor: '#ebebeb',
        plotLines: [{
            color: '#ebebeb'
        }],
        labels: {
            style: {
                color: '#525151',
                font: '12px Helvetica',
                fontWeight: 'bold'
            },
            formatter: function () {
                return this.value;
            }
        },
        title: {
            text: null
        }
    }
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

そして、私がそれを適用しているチャート：

chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'showChart'
        },
        colors: [{
            linearGradient: perShapeGradient,
            stops: [
                        [0, 'rgba(32, 106, 166, 0.3)'],
                        [1, 'rgba(32, 106, 166, 0)']
                        ]
        }, {
            linearGradient: perShapeGradient,
            stops: [
                        [0, 'rgba(120, 99, 181, 0.3)'],
                        [1, 'rgba(120, 99, 181, 0)']
                        ]
        },
                ],
        xAxis: [{
            type: 'datetime',
            labels: {
                formatter: function () {
                    var monthStr = Highcharts.dateFormat('%l:%M %P', this.value);
                    return monthStr;
                }
            }
        }],
        series: [{
            name: 'Public Views',
            type: 'area',
            marker: {
                symbol: 'url(/Assets/images/marker_blue.png)'
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2009, 9, 6, 0, 0, 0),
            data: [502, 435, 309, 247, 302, 434, 568, 702, 935, 809, 647, 502, 834, 526, 302, 335, 409, 647, 702, 634, 668, 902, 935, 1009]
        }, {
            name: 'Company Views',
            type: 'area',
            marker: {
                symbol: 'url(/Assets/images/marker_purple.png)'
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2009, 9, 6, 0, 0, 0),
            data: [406, 307, 211, 133, 221, 367, 366, 506, 707, 611, 333, 221, 567, 466, 106, 107, 281, 433, 221, 567, 466, 606, 607, 811]
        }]
    });
4

1 に答える 1

11 
yAxis: [{
        gridLineColor: '#ebebeb',
        lineColor: '#ebebeb',
        minorGridLineColor: '#ebebeb',
        tickColor: '#ebebeb',
        plotLines: [{
            color: '#ebebeb'
        }],
        labels: {
            style: {
                color: '#525151',
                font: '12px Helvetica',
                fontWeight: 'bold'
            },
            formatter: function () {
                return this.value;
            }
        },
        title: {
            text: null
        }
    }]

yAxisの中括弧の周りの余分な[]に注意してください。xには必要ありません。yAxisは2番目のy軸を持つことができるため。

于 2012-07-13T14:55:57.243 に答える