高图表格式化程序无法在Highchart API上运行

时间:2016-01-08 14:28:26

标签: javascript php jquery highcharts

我正在使用Highchart库,但在使用相同功能后非常失望。 Highchart回调函数格式化程序对我的任何图表都不起作用。 我正在使用Highchart API,它返回图表的图像。但是x轴值错误。我希望价值是“hello1,hello2,hello3等”但它只给我1号,2号,3号...... 请帮帮我。

Js Fiddle的链接:https://jsfiddle.net/stjk38rz/

代码是

var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness'],
        count = 0;

    var options = {
        exporting: {
        url: 'https://export.highcharts.com/'
    },
        chart: {
            polar: true,
            renderTo: 'container', 
            zoomType: 'x'
        },
        pane: {
            startAngle: 45,
        },

        title: {
            text: 'Highcharts Polar Chart'
        },

        xAxis: {
            tickInterval: 1,
            min: 0,
            max: 6,
            labels: {
                enabled: true,
                formatter: function () {
                    if(this.value.toString().substring(0, 6) == 0)
                    {
                        return "hello1";
                    }
                    if(this.value.toString().substring(0, 6) == 1)
                    {
                        return "hello2";
                    }
          if(this.value.toString().substring(0, 6) == 2)
                    {
                        return "hello3";
                    }
          if(this.value.toString().substring(0, 6) == 3)
                    {
                        return "hello4";
                    }
          if(this.value.toString().substring(0, 6) == 4)
                    {
                        return "hello5";
                    }
          if(this.value.toString().substring(0, 6) == 5)
                    {
                        return "hello6";
                    }
                }
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + categories[Highcharts.numberFormat(this.x, 0) - 1] + '</b><br/>' + 'value: ' + this.y;
            }
        },

        yAxis: {
            labels: {
               enabled: false
           },
            min: 0,
            tickInterval: 10,
            tickPositions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            minorTickInterval: 0
        },

        plotOptions: {
            series: {
                pointStart: 0.5,
                pointInterval: 1
            },
            column: {
                pointPadding: 0,
                groupPadding: 0
            }
        },

        series: [{
            type: 'column',
            name: 'test data',
            data: [{
                y: 9.5,
                color: '#0FCCD9'
            }, {
                y: 1,
                color: '#ED1334'
            }, {
                y: 3,
                color: '#EDCC13'
            }, {
                y: 4,
                color: '#34ED13'
            }, {
                y: 5,
                color: '#34ED13'
            }, {
                y: 6,
                color: '#34ED13'
            }]
        }]
    };

var obj = {},
    exportUrl = options.exporting.url;
    obj.options = JSON.stringify(options);
    obj.type = 'image/png';
    obj.async = true;

    $.ajax({
        type: 'post',
        url: exportUrl,
        data: obj,
        success: function (data) {
            var imgContainer = $("#imgContainer");
            $('<img>').attr('src', exportUrl + data).attr('width', '250px').appendTo(imgContainer);
            $('<a>or Download Here</a>').attr('href', exportUrl + data).appendTo(imgContainer);

        }
    });

1 个答案:

答案 0 :(得分:1)

似乎formatter根本没有被调用。

这可能是因为它是极坐标图或者您的代码中可能还有其他一些冲突会覆盖这个?

只要您只需要文字,就可以将文字作为categories传递,即:

var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness']
xAxis: {
    categories: categories
}

更新了fiddle