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

标签 javascript highcharts

我想更改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 等。我想显示它们在 map 中指定的字符串值。我无法找到可以实现此目的的链接。

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

因此,当我向下钻取值为 4 的条时,向下钻取显示值为 7,8,13,18 的 4 个条。我不想显示值,而是想显示 msMap 中指定的映射

最佳答案

我认为将正确的对象引用粘贴为特定向下钻取点的 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]
  ]

},

你就是这么想的吗?

关于javascript - 使用 HighCharts 更改向下钻取时的 X 轴标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59796860/

相关文章:

javascript - highcharts 突出显示所选点 (png)

javascript - 如何从javascript中附加的表中获取值

javascript - Highcharts - 当稍后将系列添加到绘图时添加 Axys 属性

performance - Highstock 与 Google 图表的性能对比

javascript - Vuex - 突变后获取状态

javascript - 在具有自定义输出的 Highcharts 中使用 columnrange 图表类型?

c# - 从 .net 代码后面将 json 值传递给 highcharts

javascript - 使用 React Suspense 和 React.lazy 子组件进行 Jest/Enzyme 类组件测试

javascript - 使用自定义函数作为另一个函数的参数

javascript - 当我在饼图中选择一个切片时,我想显示切片选择的某种视觉表示