javascript - Highcharts 在 x 轴标签上显示绘图值

标签 javascript highcharts

我有一个只有一个数据系列的蜘蛛网图。为了打印的利益,我想在实际标签名称之后合并标签中绘制的值,但我似乎无法弄清楚该怎么做。

这个例子有助于解释我的意思,是我在搜索中找到的条形图。代码布局与我的相似,而且比我的要简洁得多,我相当确定这个解决方案很容易转移。

labels: {
    formatter: function() {
        return this.value + ' XX.X';
    }
}

JSFiddle Here

所以对于 X 轴,我试图用相关的 Y 值替换“XX.X”以获得标签:“Foo 29.9 | Bar 71.5 | Foobar 106.4”

我深入研究了 xAxis 标签格式化程序中的“this”,并在“this.chart.series[0].yData”中找到了 Y 数字,但无法找到将这些关联回每个相关的 X 标签,我认为这似乎是错误的处理方式。

最佳答案

您可以在 chart.events.load 中呈现图表后执行此操作使用 setCategories 的方法.下面的代码假定 xAxis 上的每个索引元素都有一个对应的数据元素。如果不是,那么您将需要处理这种情况。

chart: {
    events: {
        load: function (event) {
            var cats = this.xAxis[0].categories;
            var theData = this.series[0].data;
            var newCats = [];

            for (var i = 0; i < cats.length; i++) {
                newCats.push(cats[i] + ' ' + theData[i].y)           
            }

            this.xAxis[0].setCategories(newCats);
        }
    }
}

直播 demo .

关于javascript - Highcharts 在 x 轴标签上显示绘图值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23612042/

相关文章:

javascript - 为 DotNet.HighCharts 中的每一列设置不同的颜色

javascript - Highcharts 系列图以 tick 开始和结束并以 max 结束

javascript - 生成的表在 firefox 33 中为空

javascript - 如何检查选择器是否匹配 jQuery 中的某些内容?

javascript - JS 中滑动和/或动画的问题

javascript - 如何在Hightcharts中设置垂直条形图|我作为组件通过了。如何作为 Prop 发送

javascript - 从 CSV 将 highcharts 添加到 mapbox 弹出窗口?

Javascript - Highchart - 数据点和标志的工具提示位置

javascript - 你能通过 Prop 将组件传递给 child 吗

javascript - 循环和渲染元素在 React-native 中不起作用