gpt4 book ai didi

javascript - Highcharts -- 隐藏零值而不使用 'null'

转载 作者:行者123 更新时间:2023-11-30 00:34:27 24 4
gpt4 key购买 nike

我想使用两个图表来展示我想要实现的目标。

这个圆环图 ( http://jsfiddle.net/b749uoto/ ) 有两个零值:一个是“Sony Ericsson”,另一个是“Nintendo”。代码漂亮地隐藏了这些值。甚至连标签都没有出现。

负责在圆环图上隐藏零值的代码:

dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}

现在,这个 3d 条形图 ( http://jsfiddle.net/arqL4ch2/1/ ) 与上面的圆环图具有相同的数据,但显示的都是零值。这张图表给我的第一印象是“Sony Ericsson”和“Nintendo”的值不为零。

我想在 3d 条形图(数据和标签)中隐藏这两家公司而不应用“空”值,因为这样做会在公司之间创建一个巨大的空白空间。

我尝试了一些我搜索过的建议,但没有用。我不是 JavaScript 高手。

这可能吗?谢谢。

编辑 1:我删除了上面提到我正在使用 PHP 获取图表数据的一段,以避免获得特定于 PHP 或 SQL 的答案。我只想将图表 1 上的相同行为应用于图表 2。我坚信答案依赖于一些 Javascript-fu,但我没有。

编辑 2:为两个图表显示的代码太长。我删除了它,只留下圆环图中的“隐藏零值”部分。

最佳答案

如果您只想为每个类别获取一个值,您可以在您的 PHP 代码中检查它,如果它的值为零,则不要将它添加到您的系列数据数组中。如果没有看到生成数据的代码,我就不能更具体了。如果您使用 SQL 查询来获取值,您可以让它只返回非零条目吗?像这样的伪代码:

SELECT vendor, deviceCount
FROM devices
WHERE deviceCount > 0

我做了一些测试,您可以在图表本身内进行测试 - 只是需要修改一些代码。使用 chart.events.load钩子(Hook):

    events: {
load: function () {
var theChart = this;
var theSeries = this.series;
var removeIndex = [];
var weight = 0;
for (var key in theSeries) {
var aSeries = theSeries[key];
if (aSeries.data[0].y == 0) {
removeIndex.push(parseInt(key));
}
}
for (var i in removeIndex) {
var iRemove = removeIndex[i] - weight;
theChart.series[iRemove].remove();
weight = weight + 1;
}
}
}

棘手的部分是 weight 项。当您删除索引项时,总索引会缩小。

其中大部分只是一个循环。这是一组非常冗长的代码,您可以将其压缩为更小的代码。此代码循环遍历图表中的每个系列,并假设每个系列只有一个点。然后检查该单个点的值是否为 0。如果是,我们将该系列的索引添加到 removeIndex 数组。下一个循环遍历 removeIndex 数组并实际删除该系列。直播demo .

关于javascript - Highcharts -- 隐藏零值而不使用 'null',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27800139/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com