如何在图表线上方添加渐变颜色？ [英] How to add gradient colors above chart line?

问题描述

我正在工作随机数据。在这种情况下，只有数据传输的区域应该获得渐变颜色，聊天中的数据之外的空白空间不应该获得渐变颜色。

根据@DaMaxContent答案，输出将如下图所示。

我不想要填充图表数据的其他区域的渐变。

解决方案

为了满足您要求的各种标准，我将通过创建

a href =https://i.stack.imgur.com/ZRRxR.png =nofollow noreferrer>

在这种情况下，您需要预处理数据，您需要为y轴分配一个最大值

  > var max = 0; 
 var data1 = [... your data array ...]; 
 var data2 = []; 
 $ .each（data1，function（i，point）{
 max = point> max？point：max; 
}）; 
 max = Math.ceil（max * 1.1）; 
 $ .each（data1，function（i，point）{
 data2.push（（max  -  point））; 
}）; 
  

然后，您需要将此最大值分配为 yAxis max proeprty，您可能需要设置 endOnTick：false 用tickInterval解析：

  yAxis：{
 max：max，
 endOnTick：false 
} 
  

然后对于虚拟系列，定义背景颜色渐变。
我们还将 showInLegend 和 enableMouseTracking 属性设置为 false ，以使其不会显示在图例或工具提示中：

  {
 data：data2 ，
 showInLegend：false，
 enableMouseTracking：false，
 fillColor：{
 linearGradient：{
 x1：0，
 y1：1，
 x2：0，
 y2：0 
}，
 stops：[
 [0，Highcharts.getOptions（）。colors [0]]，
 [1 ，Highcharts.Color（Highcharts.getOptions（）。colors [0]）。setOpacity（0）.get（'rgba'）] 
] 
} 
  
 
 
 
 小提示示例：
 
 
 
 
 
  http://jsfiddle.net/jlbriggs/mcp3trmk/  
 
 
 
 
 
这样可以确保渐变总是根据要求匹配数据。
 
Here I am getting gradient color at top of the chart area by reversing y-Axis. check the image below .
   yAxis: {
            reversed: true,
            showFirstLabel: false,
            showLastLabel: true
         }


I don't want to reverse the y-Axis, if i am reversing the y-Axis my chart also reversed. I want the gradient color which is in top of the chart line without using this Reversed Y-axis. Suggest me to if any other options in highcharts.

Could any one help me to solve this.



I am working live random data. In this case only the area traveled by the data should get the gradient color , empty space other than the data in chat shouldn't get gradient color. 

As per @DaMaxContent answer , the output will act like below image.



I don't want that gradient which filled in other area of the chart data. Could you please help me to resolve this.
解决方案
To meet the various criteria you have asked for, I would accomplish this by creating a dummy series to create the gradient effect.

Example Result:



In this scenario, you will need to pre-process your data, and you will need to assign a max value for the y axis explicitly.

Example Code:
var max = 0;
var data1 = [...your data array...];
var data2 = [];
$.each(data1, function(i,point) {
    max = point > max ? point : max;
});
max = Math.ceil(max * 1.1);
$.each(data1, function(i,point) {
    data2.push((max - point));
});
You will then need to assign that max value as your yAxis max proeprty, and you may need to either set endOnTick: false, or otherwise account for the max resolving with your tickInterval:
yAxis: { 
  max:max,
  endOnTick:false
}
Then for your dummy series, define the background color gradient.
We'll also set the showInLegend and enableMouseTracking properties to false so that it doesn't show in the legend or tooltip:
  {
    data: data2,
    showInLegend:false,
    enableMouseTracking:false,
    fillColor : {
      linearGradient : {
        x1: 0,
        y1: 1,
        x2: 0,
        y2: 0
      },
      stops : [
        [0, Highcharts.getOptions().colors[0]],
        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
      ]
    }
Fiddle Example:


http://jsfiddle.net/jlbriggs/mcp3trmk/


This ensures that the gradient will always match the data, as requested.

                        
这篇关于如何在图表线上方添加渐变颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！