图形多色区域线[关闭]

【问题标题】：Graph multicolor area line [closed]图形多色区域线[关闭]
【发布时间】：2019-04-14 23:13:19
【问题描述】：

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

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

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

【问题讨论】：

声明：我是 image-charts 创始人 (image-charts.com)。如果需要生成折线图的图片，很简单，就是一个URL：image-charts.com/…

标签： charts highcharts area

【解决方案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

【讨论】：