Highcharts xAxis显示钻取时钻取的标签

时间:2015-05-08 08:20:39

标签: highcharts scrollbar highstock drilldown

当我点击地区时,它会显示向下钻取的村庄,但是当我钻取时,它会显示xAxis数据以及来自钻取的标签,即带有地区名称的村庄名称。 我希望在钻取时仅显示区域名称,并且仅在钻取时显示村庄名称。 如果没有更多的地区名称,我也可以隐藏显示为1,2,3,4,5的xAxis系列。 这是小提琴 - http://jsfiddle.net/prachi_chandra/3e4Lnctm/3/

如果有人能帮我解决这个问题,我真的很感激。提前谢谢。



$(function() {

    Highcharts.setOptions({
        lang: {
            drillUpText: '? Back to Main'
        }
    });


    // Create the chart
    var defaultTitle = "Population District Wise";
    var drilldownTitle = "Population Village Wise - District: ";

    // Create the chart
    var chart = new Highcharts.Chart({
        chart: {

            height: 320,
            type: 'column',
            renderTo: 'chart_div1',
            events: {
                drilldown: function(e) {
                    chart.setTitle({
                        text: drilldownTitle + e.point.name
                    });
                },
                drillup: function(e) {
                    chart.setTitle({
                        text: defaultTitle
                    });
                }
            }
        },
        title: {
            text: defaultTitle,
            align: 'center',
            y: 5,
            style: {
                fontSize: '12px',
                fontWeight: 'bold',
                fontFamily: 'Verdana, sans-serif'
            }
        },
        credits: {
            enabled: false
        },
        scrollbar: {
            enabled: true
        },

        scrollbar: {
            enabled: true,
            barBackgroundColor: 'gray',
            barBorderRadius: 7,
            barBorderWidth: 0,
            buttonBackgroundColor: 'gray',
            buttonBorderWidth: 0,
            buttonArrowColor: 'yellow',
            buttonBorderRadius: 7,
            rifleColor: 'yellow',
            trackBackgroundColor: 'white',
            trackBorderWidth: 1,
            trackBorderColor: 'silver',
            trackBorderRadius: 7
        },

        xAxis: {

            min: 0,
            max: 5,
            type: 'category'
        },

        yAxis: [{ //--- Primary yAxis
            title: {
                text: 'Population'
            }
        }],



        legend: {
            enabled: false
        },

        plotOptions: {

            series: {
                name: 'Population',
                maxPointWidth: 30,
                dataLabels: {
                    enabled: true
                }
            }
        },

        series: [{
            name: 'Population',
            colorByPoint: true,
            data: [{
                name: 'District',
                y: 28,
                drilldown: '20'
            }]
        }],
        drilldown: {
            series: [{
                id: '20',
                data: [
                    ['Village1', 6],
                    ['Village2', 22]
                ]
            }]
        }
    });
});    

                       

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="chart_div1" style="margin:0px;"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

最简单的解决方案可能是删除max: 5。然后你不会看到错误的类别标签,你也看不到空的插槽。见this updated JSFiddle演示。