在進入第二個系列之後更改深入圖表的xAxis和yAxis標題

我繪製了深入圖表，並且我不知道如何在單擊酒吧並轉到第二個圖表後更改x軸和y軸標題。在單擊drillUp按鈕並返回第一個圖表後，如何更改爲默認標題。在進入第二個系列之後更改深入圖表的xAxis和yAxis標題

例如，我希望我的第一張圖的X軸標題是‘百分比人氣指數’和Y軸標題是‘學校數目’。 第二張圖的x軸標題爲「學校名稱」和y軸標題爲「百分比」。

我搜索了一些相關的代碼。有一個關於如何改變鑽取圖表的標題：

var defaultTitle = "Basic drilldown"; 
var drilldownTitle = "More about "; 
var chart = new Highcharts.Chart({ 
chart: { 
    type: 'column', 
    renderTo: 'container', 
    events: { 
     drilldown: function(e) { 
      chart.setTitle({ text: drilldownTitle + e.point.name }); 
     }, 
     drillup: function(e) { 
      chart.setTitle({ text: defaultTitle }); 
     } 
    } 
}, 
title: { 
    text: defaultTitle 
}, 
// ... more options});

但是，我不知道如何使用我的情況。

下面是代碼：

Highcharts.chart('container', { 
 
    chart: { 
 
    type: 'column' 
 
    }, 
 
    title: { 
 
    text: 'Basic drilldown' 
 
    }, 
 
    xAxis: { 
 
    type: 'category', 
 
    title: { 
 
     enabled: true, 
 
     text: "Percentage Range" 
 
    } 
 
    }, 
 
    yAix: { 
 
    title: { 
 
     enabled: true, 
 
     text: "Number of Schools" 
 
    } 
 
    }, 
 
    legend: { 
 
    enabled: false 
 
    }, 
 
    plotOptions: { 
 
    series: { 
 
     borderWidth: 0, 
 
     grouping: false, 
 
     dataLabels: { 
 
     enabled: true 
 
     } 
 
    } 
 
    }, 
 
    series: [{ 
 
    name: 'Things', 
 
    colorByPoint: true, 
 
    pointPadding: 0, 
 
    data: [{ 
 
     name: '100-70%', 
 
     y: 5, 
 
     drilldown: '100-70%' 
 
    }] 
 
    }, { 
 
    name: 'Things', 
 
    colorByPoint: true, 
 
    pointPadding: 0.1, 
 
    data: [{ 
 
     name: '70-30%', 
 
     y: 2, 
 
     drilldown: '70-30%' 
 
    }] 
 
    }, { 
 
    name: 'Things', 
 
    colorByPoint: true, 
 
    pointPadding: 0.3, 
 
    data: [{ 
 
     name: '30-0%', 
 
     y: 4, 
 
     drilldown: '30-0%' 
 
    }] 
 
    }], 
 
    drilldown: { 
 
    series: [{ 
 
     id: '100-70%', 
 
     data: [ 
 
     ['Cats', 4], 
 
     ['Dogs', 2], 
 
     ['Cows', 1], 
 
     ['Sheep', 2], 
 
     ['Pigs', 1] 
 
     ] 
 
    }, { 
 
     id: '70-30%', 
 
     data: [ 
 
     ['Apples', 4], 
 
     ['Oranges', 2] 
 
     ] 
 
    }, { 
 
     id: '30-0%', 
 
     data: [ 
 
     ['Toyota', 4], 
 
     ['Opel', 2], 
 
     ['Volkswagen', 2] 
 
     ] 
 
    }] 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

來源

2017-08-11 YUXUAN XIE

您可以使用Axis.update（）函數（http://api.highcharts.com/h ighcharts/Axis.update）。例如：http://jsfiddle.net/cypuydv0/。 –

必須通過文檔一看Axis.setTitle

var defaultTitleXAxis = "Percentage Range"; 
var defaultTitleYAxis = "Number of Schools"; 
var drilldownTitleXAxis = "School Name"; 
var drilldownTitleYAxis = "Percentage"; 
// Create the chart 
Highcharts.chart('container', { 
    chart: { 
    type: 'column', 
    events: { 
     drilldown: function(e) { 
      this.xAxis[0].setTitle({ text: drilldownTitleXAxis }); 
      this.yAxis[0].setTitle({ text: drilldownTitleYAxis }); 
     }, 
     drillup: function(e) { 
      this.xAxis[0].setTitle({ text: defaultTitleXAxis }); 
      this.yAxis[0].setTitle({ text: defaultTitleYAxis }); 
     } 
    } 
    }, 
    //....... remaining code 
})

Fiddle演示

來源

2017-08-12 04:31:22

在進入第二個系列之後更改深入圖表的xAxis和yAxis標題

回答

相關問題