Question

我正在绘制阈值违规行为。在某些情况下，当值高于阈值时，会违反阈值。在这种情况下，我填充该行下方的区域，如下所示：

但是，如果值低于阈值时超出阈值，我想填充线上方的区域。因为我不知道如何，下面的图像看起来有点奇怪。如果只是开始时的大跌是红色，那就更好了。就像第一张图片的反向效果一样。

如何在AmCharts 3中填充以上区域的折线图？

我当前的配置（原谅PHP，我的前端应用程序吃掉JSON）：

array(
    'id'                 => 'major',
    'valueAxis'          => 'result',
    'valueField'         => 'result',
    'type'               => 'smoothedLine',
    'lineThickness'      => 2,
    'lineAlpha'          => 1,
    'lineColor'          => $threshold_at_top ? 'gold' : 'crimson',
    'fillAlphas'         => $threshold_at_top ? 0.001 : 0.1,
    'negativeLineAlpha'  => 1,
    'negativeLineColor'  => $threshold_at_top ? 'crimson' : 'gold',
    'negativeFillAlphas' => $threshold_at_top ? 0.1 : 0.001,
    'negativeBase'       => $threshold_major,
    'bullet'             => 'none',
    'balloon'            => array(
        'enabled' => false
    )
),
array(
    'id'                 => 'minor',
    'valueAxis'          => 'result',
    'valueField'         => 'result',
    'type'               => 'smoothedLine',
    'lineThickness'      => 2,
    'lineAlpha'          => $threshold_at_top ? 1 : 0,
    'lineColor'          => $threshold_at_top ? 'teal' : 'crimson',
    'fillAlphas'         => $threshold_at_top ? 0.001 : 0.1,
    'negativeLineAlpha'  => $threshold_at_top ? 0 : 1,
    'negativeLineColor'  => $threshold_at_top ? 'crimson' : 'teal',
    'negativeFillAlphas' => $threshold_at_top ? 0.1 : 0.001,
    'negativeBase'       => $threshold_minor,
    'bullet'             => 'none',
    'balloonText'        => '<b>Result</b><br /><span style="font-size:1.5em;">[[value]]' . ( $last_datapoint->is_percentage ? ' %' : '' ) . '</span>',
    'balloon'            => array(
        'adjustBorderColor' => false,
        'color'             => '#f1f1f1',
        'fillColor'         => '#2d87c3'
    )
)

minor是在major之上绘制的相同折线图。

到目前为止我尝试了什么

当$threshold_at_top == true时，我添加另一个（不可见）top图表，它在每个数据点上只是相同的值。该值高于其他图的所有其他值。例如，当我绘制结果在0到100之间的图表时，我将此隐藏的top图表绘制为100。

然后我将它添加到graphs对象（作为第一个元素）：

array_unshift( $options[ 'graphs' ], array(
    'id'          => 'top',
    'valueAxis'   => 'result',
    'valueField'  => 'top',
    'type'        => 'smoothedLine',
    'lineAlpha'   => 0,
    'fillAlphas'  => 0,
    'bullet'      => 'none',
    'balloon'     => array(
        'enabled' => false
    )
));

然后，我将现有的major和minor图表告诉'fillToGraph' : 'top'：

$options[ 'graphs' ][ 3 ][ 'fillToGraph' ] = 'top';
$options[ 'graphs' ][ 4 ][ 'fillToGraph' ] = 'top';

这会产生所需的效果，但在放大时会：

当向右滚动相同的图表时，新的数据点进入视图，它以某种方式弄乱了填充的区域：

Answer 1

我联系了AmCharts的支持，他们证实了我的怀疑（强调我的）：

我和同事一起检查过，我只是想让你知道   常规折线图可以同时支持fillToGraph和negativeFill   同一时间。您可以在下面的示例中看到此行为：

https://codepen.io/team/amcharts/pen/f8d6c8c5d3a2b4550a2b99f7486355e5?editors=0010

"graphs": [{
    "id": "fromGraph",
    "fillAlphas": 0.2,
    "fillToGraph": "toGraph",
    //"type":  "smoothedLine",
    "lineAlpha": 1,
    "showBalloon": false,
    "valueField": "fromValue",
    "negativeBase": 40, 
    "negativeLineColor": "crimson"
}...

因此，我们建议使用常规行而不是smoothedLines ，如果尽可能。

使用smoothedLine图表无法创建所需效果。请参阅以下错误：

填写AmCharts中的线以上区域

到目前为止我尝试了什么

1 个答案: