javascript - High 图表格式化程序不适用于 Highchart API

Question

我正在使用 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);

        }
    });

Answer 1

似乎根本没有调用formatter。

这可能是因为它是极坐标图，或者您的代码中可能存在其他冲突覆盖了这一点？

只要您只需要文本，就可以将文本作为类别传递，即:

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

已更新fiddle