高图表类别用作系列图例

Question

我想显示x轴类别的图例;我希望它看起来就像系列图例一样，我希望它以完全相同的方式工作，通过单击图例上的相同类别来关闭图表中的类别。

我做的是以下 我有图表，我可以使用JQuery按钮禁用和启用它的类别，一切正常。现在，我只通过按钮单击禁用和启用类别。

我想要做的是在单击按钮时删除类别而不是仅禁用它。换句话说;我希望按钮能够作为Highchart中的系列图例按钮工作，其中图表将被重绘。

示例如果点击 2月， 2月类别将消失，并且空类别将介于简＆amp;三月。我不想那样。我希望图表能够在没有类别的情况下重新绘制。

$(document).ready(function () {
    if ('@Model.Data' == "") return;
    var Title = '@Model.Title';
    var X_Axis_Title = '@Model.X_Axis_Title';
    var Y_Axis_Title = '@Model.Y_Axis_Title';
    var ChartContainer = '@Model.ContainerName';
    var ChartCategories = [];
    var ChartCategoriesMaleData = [];
    var ChartCategoriesFemalData = [];
    var ChartCategoriesTotalMFData = [];
    var ChartData = [];
    var SeriesNames = [];
    var ChartDataStr = '@Model.Data';
    var SeriesNamesStr = '@Model.SeriesNames';
    //alert("ChartContainer=" + ChartContainer);

    function createDynamicCategories(chart, legendContainerId) {
        // Capturing data from chart options:
        var categories = chart.options.xAxis.categories;
        var series = chart.options.series;
        // Creating a button  for each category and place it in container:
        for (var i in chart.xAxis[0].categories) {
            checkboxHtml = '<label><button type ="submit" onclick="onclick" id="category_' + i + '">' + chart.xAxis[0].categories[i] + '</button></label>'
            $('#' + legendContainerId).append(checkboxHtml);
        }
        // Binding events to buttons:

        $('#' + legendContainerId + ' button[type ="submit"]').on('click', function () {
            var buttonID = this.id;
            alert(buttonID);
            alert(buttonID.indexOf('_'));
            var strs = [];
            var strs = buttonID.split('_');
            alert(strs[1]);
            var ID = strs[1];
            var hiddenSeries = [];
            var hiddenCategories = [];

            // Collecting disabled categories:
            hiddenSeries[ID] = null;
            hiddenCategories[ID] = ' ';

            // Updating series data:
            for (var s in chart.series){
                chart.series[s].setData($.extend([], series[s].data, hiddenSeries));
            }
            // Updating categories:
            chart.xAxis[0].setCategories($.extend([], categories, hiddenCategories));
            // Redrawing chart:
            chart.redraw();
        });
    }
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: ChartContainer,
            defaultSeriesType: 'bar'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            style: {
                left: 'auto',
                right: '30px',
                top: '70px',
                bottom: 'auto'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                this.x + ': ' + this.y + ' mm';
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [20, 71.5, 106.4, 129.2, 144.0]

        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0]
        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0]
        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6]
        }]
    });
    createDynamicCategories(chart, ChartContainer);
});