甜甜圈图中的目标线

Question

我正在尝试修改 Highchart 的 donut/pie 图表，使其看起来像这样：

我已经修改了他们的饼图的 jsfiddle，使其看起来有点像。但是我运行遇到了创建那个小 "GOAL > 55%" 刻度线和文本的问题。对于其他图表，如堆叠条形图，我已经能够在 yAxis 上使用 plotLine，但这在这里不起作用（这可能是有道理的，因为饼图实际上没有 yAxis）：

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

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

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

Answer 1

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

饼图似乎不支持绘图线，考虑到饼图的实际用途和布局，原因相对清楚。然而，这是可以通过 Highcharts 实现的，我会使用 solid gauge 作为基础，使用他们的 "Apple Activity Gauge" demo 作为起点：

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

您可以将 plotLine 添加到 yAxis 以实现目标行，并且您可以根据需要调整所有其他显示设置。一个简单粗略的例子：

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

也就是说，我觉得有义务包括我更愿意将此类信息显示为子弹图，或者只是带有目标线的条形图的简化版本。

使用条形图的示例：

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

FWIW

甜甜圈图中的目标线

Goal line in donut chart

javascript

charts

highcharts

highcharts-ng