Highcharts 我想给出x轴上的编号,工具提示根据highchart中的编号显示我的特定数组值

Highcharts 我想给出x轴上的编号,工具提示根据highchart中的编号显示我的特定数组值,highcharts,Highcharts,目前我有这样的脚本。 此处分类1数组具有编号(1,2,…),数据1数组包含x轴的值(3,8,2,1),数据2数组包含用于在工具提示中显示的值 $(function () { var jsonData = JSON.parse('[{"category":"Abc","value":3},{"category":"abc1","value":8},{"category":"abc2","value":2},{"category":"abc3","value":1}]'); va

目前我有这样的脚本。 此处分类1数组具有编号(1,2,…),数据1数组包含x轴的值(3,8,2,1),数据2数组包含用于在工具提示中显示的值

$(function () {

    var jsonData = JSON.parse('[{"category":"Abc","value":3},{"category":"abc1","value":8},{"category":"abc2","value":2},{"category":"abc3","value":1}]');

    var categories1 = [];
    for (var i = 1; i <= jsonData.length; i++) {
        categories1.push(i.toString());
    }
    var data1 = [];
    var data2 = [];
    for (var i = 0; i < jsonData.length; i++) {
        data1.push(jsonData[i].value);
        data2.push(jsonData[i].category);
    }
    colorArray = ['#4a4a4a']
    Highcharts.setOptions({
        colors: colorArray

    });
    $('#containerBrandChart').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: categories1,
            labels: {
                rotation: 30,
                align: 'top'
            },
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span>: <b>{point.y}</b>',
            pointFormat: '',
            footerFormat: '',
            borderWidth: '0',
            borderRadius: '8px',
            backgroundColor: '#000000',
            shared: true,
            useHTML: true,
            style: {
                height: 'auto',
                opacity: '.8',
                filter: 'alpha(opacity = 80)',
                padding: '10px',
                fontFamily: '"tele-grotesk",Arial,Helvetica,sans-serif',
                fontWeight: 'bold',
                color: '#ffffff',
                fontSize: '1.125em'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            },
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                    events: {
                        mouseOver: function (event) {
                            this.options.oldColor = this.color;
                            this.graphic.attr("fill", "#e20074");
                            var point = this;
                            //alert(this.x+1)
                            var t = this.x + 1;
                            $("#Brand" + t).css("background-color", "#e20074")
                            $("#Brand" + t).css("color", "white")

                        },
                        mouseOut: function (event) {

                            this.graphic.attr("fill", "#4a4a4a");
                            this.graphic.attr("fill", this.options.oldColor);
                            var t = this.x + 1;
                            $("#Brand" + t).css("background-color", "white")
                            $("#Brand" + t).css("color", "#666666")
                        }
                    }
                },
            }
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        series: [{
            name: '',
            data: data1

        }]
    });

});
我想在x轴上显示categories1数组,在工具提示中显示data2数组

$(function () {

    var jsonData = JSON.parse('[{"category":"Abc","value":3},{"category":"abc1","value":8},{"category":"abc2","value":2},{"category":"abc3","value":1}]');

    var categories1 = [];
    for (var i = 1; i <= jsonData.length; i++) {
        categories1.push(i.toString());
    }
    var data1 = [];
    var data2 = [];
    for (var i = 0; i < jsonData.length; i++) {
        data1.push(jsonData[i].value);
        data2.push(jsonData[i].category);
    }
    colorArray = ['#4a4a4a']
    Highcharts.setOptions({
        colors: colorArray

    });
    $('#containerBrandChart').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: categories1,
            labels: {
                rotation: 30,
                align: 'top'
            },
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span>: <b>{point.y}</b>',
            pointFormat: '',
            footerFormat: '',
            borderWidth: '0',
            borderRadius: '8px',
            backgroundColor: '#000000',
            shared: true,
            useHTML: true,
            style: {
                height: 'auto',
                opacity: '.8',
                filter: 'alpha(opacity = 80)',
                padding: '10px',
                fontFamily: '"tele-grotesk",Arial,Helvetica,sans-serif',
                fontWeight: 'bold',
                color: '#ffffff',
                fontSize: '1.125em'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            },
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                    events: {
                        mouseOver: function (event) {
                            this.options.oldColor = this.color;
                            this.graphic.attr("fill", "#e20074");
                            var point = this;
                            //alert(this.x+1)
                            var t = this.x + 1;
                            $("#Brand" + t).css("background-color", "#e20074")
                            $("#Brand" + t).css("color", "white")

                        },
                        mouseOut: function (event) {

                            this.graphic.attr("fill", "#4a4a4a");
                            this.graphic.attr("fill", this.options.oldColor);
                            var t = this.x + 1;
                            $("#Brand" + t).css("background-color", "white")
                            $("#Brand" + t).css("color", "#666666")
                        }
                    }
                },
            }
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        series: [{
            name: '',
            data: data1

        }]
    });

});
$(函数(){
var jsonData=JSON.parse('[{“category”:“Abc”,“value”:3},{“category”:“abc1”,“value”:8},{“category”:“abc2”,“value”:2},{“category”:“abc3”,“value”:1}]);
var分类1=[];

对于(var i=1;i,您可以使用工具提示格式化程序和自定义工具提示内容