使用amCharts,如何在条形图下重新创建阈值,如下所示?

时间:2017-09-06 10:09:57

标签: web frontend amcharts accounting

The chart I'm trying to create

我已经将上面的图片作为最终图表应该是什么样子的示例,但我在创建它时遇到了困难。

由于我们正在使用的技术,我们必须使用amCharts,并且我已根据需要堆叠和着色了列,但我无法找到添加阈值的方法(以浅绿色/蓝色/黄色显示)。根据图像顶部以对数刻度显示它也很不错,但我并不那么烦恼。

任何帮助表示感谢。

更新

感谢xorspark的壮观帮助,我设法按照我的意愿得到它,即使我最终没有使用对数。

感兴趣的人codehttps://codepen.io/dangerworm/pen/mByGqLA much better version nearly matching the original image

1 个答案:

答案 0 :(得分:1)

您可以使用guides指定阈值并标记每个细分。要完成特定的输出,每个都需要两套导向 - 一个用于填充区域,另一个用于将标签和线放在顶部。例如:

  valueAxes: [
    {
      logarithmic: true,
      guides: [
        {
          fillColor: "#ffff00",
          fillAlpha: 0.5,
          lineAlpha: 0,
          value: .1, //note that you can't use 0 in a logarithmic axis
          toValue: 40
        },{
          dashLength: 6,
          fillColor: "#ffff00",
          fillAlpha: 0.5,
          label: "poor",
          position: "right",
          lineAlpha: 1,
          value: 40,
        },
        // ...
     ]
     // ...
   }

Demo