【问题标题】:Highcharts - Pie/Donut Chart group small portionHighcharts - 饼图/甜甜圈图组小部分
【发布时间】:2016-08-05 07:49:41
【问题描述】:

如果可以将小部分组合在一起,则饼图/甜甜圈图将更易于阅读。我想将此功能添加到zeppelin-highcharts

在此示例中为Donut Chart。 Safari 有小部分无法阅读。最好将其组合到“Safari 其他版本”中

{
    name: 'Safari versions',
    categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 
                 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
    data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
}

我想像这样jsfiddle将小部分分组给其他人

{
    name: 'Safari versions',
    categories: ['Safari Other Versions', 'Safari v8.0'],
    data: [2.21, 2.56],
}

我浏览了 Highcharts API 文档,但我没有找到任何可以启用此功能的配置。

如何在 Highcharts 中实现此功能?

【问题讨论】:

  • 您是否考虑过使用带有向下钻取功能的饼图?如果您愿意,这应该很容易转换为圆环图。见highcharts.com/demo/pie-drilldown。
  • @MikeZavarello,感谢 cmets。由于我提供给工具,因此其他用户可以选择使用什么图表。对于单个饼图,如何将小部分分组到其他部分,以便饼图中只有少数(如 5 个)部分。
  • 您的数据是如何进入图表的?我在想,也许您可​​以运行一个函数,其中可以先将小于某个百分比的饼图分组在一起,然后将其作为系列数据添加到图表中。
  • 我正在尝试从 Spark DataFrame -> Highcharts 转换。请查看github.com/knockdata/zeppelin-highcharts
  • 我认为 Mikes 在制作图表之前添加过滤功能的想法是个好主意。您也可以在加载回调函数上创建此函数。看看这个例子,也许它会帮助你解决你的问题:jsfiddle.net/b33ynvaq/1

标签: highcharts pie-chart donut-chart


【解决方案1】:

我认为您可以在制作图表之前添加过滤功能。您还可以在加载事件回调函数上过滤数据。

这里你可以找到在回调函数中过滤数据的代码的简单示例:

var groupSmallData = function(series, number) {
    var groupValue = 0,
        newData = [];
    Highcharts.each(series.data, function(p) {
        if (p.y < number) {
          groupValue += p.y;
        } else {
          newData.push([p.name, p.y])
        }
    });
    newData.push(['others', groupValue]);
    series.setData(newData)
}

在这里您可以找到它如何工作的实时示例:http://jsfiddle.net/b33ynvaq/1/

【讨论】:

    猜你喜欢
    • 2012-07-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多