Angular - Highcharts - 颜色黑白点答案

【问题标题】：Angular - Highcharts - Color b/w pointsAngular - Highcharts - 颜色黑白点
【发布时间】：2021-09-27 07:17:32
【问题描述】：

我是 Angular 的新手。我开始使用 Highcharts。我想用多种颜色绘制线条系列。我可以用区域来做到这一点，但我的要求有点不同。我想为点之间的每条线分配颜色 - 无论是线型图表还是样条线图表。

是否可以绘制具有不同颜色的线系列 - 不考虑区域？

【问题讨论】：

发布你的尝试
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： angular highcharts colors zone

【解决方案1】：

您可以通过添加一些系列类型的散点图并连接它们lineWidth来实现类似区域的效果。

为了更清楚，要使散点图看起来像一条线，您可以禁用点 marker.enabled。

  chart: {
    type: 'scatter'
  },
  plotOptions: {
    scatter: {
      lineWidth: 2,
      marker: {
        enabled: false
      }
    }
  },
  series: [{
      data: [{
          x: 1,
          y: 10
        },
        {
          x: 2,
          y: 15
        }
      ],
      color: 'red'
    },
    {
      data: [{
          x: 2,
          y: 15
        },
        {
          x: 3,
          y: 25
        }
      ],
      color: 'blue'
    },
    {
      data: [{
          x: 3,
          y: 25
        },
        {
          x: 4,
          y: 5
        }
      ],
      color: 'green'
    },
  ],

演示：

http://jsfiddle.net/BlackLabel/6f8noxLr/

API 参考：

https://api.highcharts.com/highcharts/plotOptions.scatter.marker.enabled https://api.highcharts.com/highcharts/plotOptions.scatter.lineWidth

【讨论】：

感谢您的建议，工作正常。但是在这种情况下，Multiple Series 被绘制，这会导致巨大的内存消耗。有什么办法可以在单系列中实现。

【解决方案2】：

嗨，Shivabharathi Ponnuvelu，我猜你可以试试渐变。 https://jsfiddle.net/9L3f0w8h/29/

https://www.demo2s.com/javascript/javascript-highcharts-spline-chart-gradient-fill.html

lineColor: {
    linearGradient: [0,0,0,1],
    stops: [       
        [0, 'green'],
        [0.5, 'red'],
        [1, 'blue']
    ]
}

您是否有任何特定原因要在没有区域的情况下使用它？

【讨论】：