图多色区域线

Question

我需要将图形创建为showed on image。

一行颜色填充的区域， 如果点值大于零，则线条和区域的颜色为绿色，否则为红色。

我该怎么做？ JS（某些插件？）或PHP（imagick，gd）

Answer 1

您可以使用Highcharts区域系列类型并为其定义negativeColor。查看下面发布的文档和示例。

HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS：

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  series: [{
    color: 'rgba(0, 255, 0, 0.7)',
    negativeColor: 'rgba(255, 0, 0, 0.7)',
    fillOpacity: 0.2,
    marker: {
        enabled: false
    },
    data: [5, 3, 4, 7, 2, -3, -5, -2, -7, -4, 0, 3, 4, 2, 5, 1]
  }]
});

演示：
https://jsfiddle.net/BlackLabel/xa91d8o7/4/

文档：
https://www.highcharts.com/demo/area-negative
https://api.highcharts.com/highcharts/series.area