更改jqchart的categoryAxis上的文本方向

时间:2012-10-16 10:38:20

标签: jqchart

我有一个jqxchart,其中一切都很完美。 唯一的问题仍然是图表的categoryAxis上的文字。 文本在水平方向上,并与图表的其他文本重叠。 any1请帮我改变categoryAxis上显示的文字方向吗? 这是我正在使用的代码

function BindServerErrorChart() {
    // prepare chart data
    var sampleData = [
                { Server: 'Server1', Error: 6 },
                { Server: 'Server2', Error: 50 },
                { Server: 'Server3', Error: 31 },
                { Server: 'Server4', Error: 78 },
                { Server: 'Server5', Error: 19 },
                { Server: 'Server6', Error: 60.90 }
                ];


    // prepare jqxChart settings
    var settings = {
        title: "Errors By server",
        description: "",
        showLegend: true,
        enableAnimations: false,
        padding: { left: 20, top: 5, right: 20, bottom: 5 },
        titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
        source: sampleData,
        categoryAxis:
                    {
                        dataField: 'Server',
                        showGridLines: false,
                        flip: false
                    },
        colorScheme: 'scheme01',
        seriesGroups:
                    [
                        {
                            type: 'column',
                            orientation: 'horizontal',
                            columnsGapPercent: 100,
                            toolTipFormatSettings: { thousandsSeparator: ',' },
                            valueAxis:
                            {
                                flip: true,
                                unitInterval: 10,
                                displayValueAxis: true,
                                description: '',
                                formatFunction: function (value) {
                                    return parseInt(value);
                                }
                            },
                            series: [
                                    { dataField: 'Error', displayText: 'Servers' }
                                ]
                        }
                    ]
    };
    // setup the chart
                    $('#ServerErrorChart').jqxChart(settings);
}

2 个答案:

答案 0 :(得分:4)

设置textRotationAngle:90 在类别Axis设置

答案 1 :(得分:1)

我刚刚得到了解决方案。 我编辑如下。

categoryAxis:
{
dataField: 'Server',
showGridLines: false,
flip: true,
textRotationAngle: 90
},