甜甜圈图表中的目标线

时间:2016-09-06 16:41:19

标签: javascript charts highcharts highcharts-ng

我正在尝试修改Highchart的甜甜圈/饼图,看起来像这样: modified donut chart

我修改了他们的饼图的jsfiddle看起来有点像它。但是我遇到了一些问题,即创造了一个“GOAL&gt; 55%”刻度和文字。对于其他图表,如堆积条形图,我已经能够在yAxis上使用plotLine,但这在这里不起作用(这可能有意义,因为饼图实际上没有yAxis):< / p>

yAxis: {
        title: {
          text: "Hi there"
        },
        plotLines:[
          {
           color: 'red',
           dashStyle: 'dash',
           value: 6,
           width: 4,
          }
         ]
        },

http://jsfiddle.net/alexschoolzilla/cehL81ue/1/

关于如何为饼图执行此操作的任何想法? 在此先感谢您的帮助!

1 个答案:

答案 0 :(得分:3)

正如我在评论中提到的,我认为这种类型的显示非常低效且无效。

饼图似乎不支持绘图线,原因在于饼图的实际用途和布局相对清晰。但是,使用Highcharts是可以实现的,我会使用它们的&#34; Apple Activity Gauge&#34;演示作为起点:

您可以向plotLine添加yAxis以获得目标线,并且可以根据需要调整所有其他显示设置。一个快速粗略的例子:

screenshot 1

那就是说,我觉得有必要包括我更喜欢将这种类型的信息显示为子弹图,或者只是带有目标线的条形图的简化版本。

使用条形图的示例:

screenshot 2

FWIW