高位图表格式化程序无法在高位图表API上工作

High chart formatter not working on Highchart API

本文关键字:高位图 位图 API 工作 程序 表格 格式化      更新时间:2023-09-26

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

似乎根本没有调用formatter

这可能是因为它是一个极坐标图,或者您的代码中可能存在其他冲突来覆盖它?

只要你只想要文本,你就可以将文本作为categories传入,即:

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

更新的fiddle