使用HighCharts向下钻取时更改X轴标签

问题描述 投票:0回答:1

我想更改x轴的标签。下面是我的代码



var msMap = new Object();
msMap[7] = "Cross Border Error";
msMap[8] = "Domestic Error";
msMap[13] = "Delivery Error";
msMap[18] = "Personal Error";
msMap[6] = "Executive Error";
msMap[35] = "Legal Error";
Highcharts.chart('container', {
    chart: {
        type: 'column',
       events: {
        drilldown: function(e) {
            this.xAxis[0].setTitle({ text: 'ErrorID' });
        },
        drillup: function(e) {
            this.xAxis[0].setTitle({ text: 'Mean Absolute Error (in days)' });
        }
    }
    }, plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true
                }
            }
        },

    title: {
        text: 'Browser market shares. January, 2018'
    },
    subtitle: {
        text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
    },
    xAxis: {
    title: {
                        text: 'Mean Absolute Error (in days)'
                    },
        type: 'category',
             crosshair: true
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }

    },


    tooltip: {
        shared:true,
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    series: [
        {
            name: "Browsers",
            data: [
                {
                    name: "4",
                    y: 15,
                    drilldown: "4"
                },
                {
                    name: "5",
                    y: 10,
                    drilldown: "5"
                }
            ]
        }
    ],
    drilldown: {
        series:[

        { 
        name:"4",
        id:"4",
        pointWidth: 30,
        data:[
             [
                18,
                5
             ],
             [
                7,
                8
              ],
              [ 13,
                2
                ] ,
                [8,5]
                ]

        },

        {name:"5",
        id:"5",
        pointWidth: 20,
        data:[
        [6,5],
        [35,5]
        ]
        }

        ]

    }
});

在向下钻取而不是x轴上显示值7,8等。我想显示其在地图中指定的字符串值。我找不到可以实现此目标的链接。

这是我的jsfiddle链接https://jsfiddle.net/ebkwnsz2/

因此,当我确实向下钻取值等于4的条时,向下钻取显示了值为7、8、13、18的4条。我不想显示值,而是要显示其在msMap中指定的映射

javascript highcharts
1个回答
0
投票

我认为将适当的对象引用粘贴为特定钻取点的x值是您正在寻找的解决方案。

演示:https://jsfiddle.net/BlackLabel/5m8a3s2j/

 {
  name: "4",
  id: "4",
  pointWidth: 30,
  data: [
    [
      msMap[18],
      5
    ],
    [
      msMap[7],
      8
    ],
    [msMap[13],
      2
    ],
    [msMap[8], 5]
  ]

},

这是您的初衷吗?

© www.soinside.com 2019 - 2024. All rights reserved.