甜甜圈图表中的目标线

Question

我正在尝试修改Highchart的甜甜圈/饼图，看起来像这样：

我修改了他们的饼图的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/

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

Answer 1

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

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

• http://www.highcharts.com/demo/gauge-activity

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

• http://jsfiddle.net/jlbriggs/jjgw4mn4/

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

使用条形图的示例：

• http://jsfiddle.net/jlbriggs/m2fLd6ey/

FWIW