Question

目前我有这样的脚本。这里，包含编号（1,2，...）和data1数组的categories1数组包含x轴（3,8,2,1）的值，data2数组包含在工具提示中显示的值。

我想在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

        }]
    });

});

我想在x轴上显示编号，并根据相应的类别显示工具提示。

Answer 1

您可以使用工具提示格式化程序并自定义工具提示的内容。

http://api.highcharts.com/highcharts#tooltip.formatter

我想在x轴上给出编号，工具提示根据高图中的那个显示我的特定数组值

1 个答案: