Blazor-ApexCharts:渐变色选项对仪表图没有影响

huangapple go评论58阅读模式
英文:

Blazor-ApexCharts : Gradient color options does not affects on Gauge chart

问题

I'm using this code to implement a gauge chart (RadialBar) with a custom gradient color that starts with one color and ends with another color. Here is my sample code:

ChartOptions.PlotOptions = new PlotOptions
{
    RadialBar = new PlotOptionsRadialBar
    {
        StartAngle = -90,
        EndAngle = 90,
        DataLabels = new RadialBarDataLabels
        {
            Name = new RadialBarDataLabelsName
            {
                Show = false
            }
        }
    }
};

ChartOptions.Fill = new Fill
{
    Type = new List<FillType>
    {
        FillType.Gradient
    },
    Gradient = new FillGradient
    {
        Shade = GradientShade.Dark,
        Type = GradientType.Horizontal,
        ShadeIntensity = 1,
        GradientToColors = new List<string> { "#E966A0", "#FFB84C", "#79E0EE" },
        InverseColors = true,
        OpacityFrom = 0.7,
        OpacityTo = 0.9,
        Stops = new List<double> { 0, 50, 100 }
    },
};

But only the first color (#E966A0) affects my chart!! Can anybody help me solve this problem? Thanks in advance.

-- Edited:

Thanks for your help. I've changed my code as follows:

ChartOptions.Fill = new Fill
{
    Type = new List<FillType>
    {
        FillType.Gradient
    },
    Gradient = new FillGradient
    {
        Shade = GradientShade.Light,
        Type = GradientType.Horizontal,
        ShadeIntensity = 1,
        GradientToColors = new List<string> { "#FFD95A", "#FF6969" },
        //InverseColors = true,
        OpacityFrom = 0.7,
        OpacityTo = 0.8,
        Stops = new List<double> { 0, 50, 100 }
    },
};
ChartOptions.Colors = new List<string> { "#1B9C85" };

Somewhat done so far. It starts from the Green color (ChartOptions.Colors property) and ends with the first color of GradientToColors property. But the second color of GradientToColors does not affect my chart. It's red color, which I want to use as the end color. I want to start from Green Color, have the middle of the track become Yellow color, and the End Color become Red. Can you help me accomplish this? Thanks.

英文:

i'm use this code to implement gauge chart (RadialBar) with custom gradient color which have to start a color and end with another color. here is my sample code :

ChartOptions.PlotOptions = new PlotOptions
		{
			RadialBar = new PlotOptionsRadialBar
			{
				StartAngle = -90, 
				EndAngle = 90,
				DataLabels = new RadialBarDataLabels
				{
					Name = new RadialBarDataLabelsName 
					{ 
						Show = false 
					}
				}
			}
		};
	ChartOptions.Fill = new Fill
	{
		Type = new List&lt;FillType&gt;
		{ 
			FillType.Gradient 
		},
		Gradient = new FillGradient
		{
			Shade = GradientShade.Dark, 
			Type = GradientType.Horizontal, 
			ShadeIntensity = 1, 
			GradientToColors = new List&lt;string&gt; { &quot;#E966A0&quot;, &quot;#FFB84C&quot;, &quot;#79E0EE&quot; },
			InverseColors = true,
			OpacityFrom = 0.7, 
			OpacityTo = 0.9,
			Stops = new List&lt;double&gt;{ 0, 50, 100 }
		},
	};

But only the first color (#E966A0) affects to my chart!!
Can anybody help me how to solve this problem?
Thanks in advance.

-- Edited :

Thanks for your help
I've changed my code as follow :

ChartOptions.Fill = new Fill
	{
		Type = new List&lt;FillType&gt;
		{ 
			FillType.Gradient 
		},
		Gradient = new FillGradient
		{
			Shade = GradientShade.Light, 
			Type = GradientType.Horizontal,
			ShadeIntensity = 1,
			GradientToColors = new List&lt;string&gt; { &quot;#FFD95A&quot;, &quot;#FF6969&quot; },
			//InverseColors = true,
			OpacityFrom = 0.7, 
			OpacityTo = 0.8,
			Stops = new List&lt;double&gt;{ 0, 50, 100 }
		},
	};

ChartOptions.Colors = new List<string> { "#1B9C85" };

Somewhat done so far. It start from Green color ('ChartOptions.Colors' property) and End with the first color of 'GradientToColors' property. But the second color of 'GradientToColors' does not affects to my chart. It's red color which i want to used that as End Color.
I want to start from Green Color, The middle of Track become Yellow color and the End Color become Red.
Can u help me how to accomplish this?
Thanks

答案1

得分: 1

指定了gradientToColors文档如下:

主要颜色数组成为gradientFromColors,而该数组则成为渐变的结束颜色。数组中的每个索引对应于系列索引。

这意味着,如果你只有一个系列,你需要将ChartOptions.Colors定义为一个颜色数组(渐变的起始颜色),并将GradientToColors也定义为一个颜色数组,其中只包含一个颜色。

如果你想添加更多具有不同渐变的系列,请在你的数组中添加颜色。如果你的系列多于已定义的颜色,它将从数组的开头重新开始循环。

编辑

如果你希望渐变比两种颜色之间的简单渐变更加详细,你应该使用colorStops,这允许你精确指定渐变的方式。然而,目前在Blazor版本上还没有实现这个选项。

英文:

The doc specifies for gradientToColors:

>The main colors array becomes the gradientFromColors and this array becomes the end colors of the gradient. Each index in the array corresponds to the series-index.

This means, if you are having only one series, you need to define ChartOptions.Colors being an array of one color (the beginning of the gradient) and GradientToColors being an array of one color as well.

If you want to add more series with different gradients, add colors in your arrays. If you have more series than colors defined, it will go back to the start of the array and loop.

Edit

You want the gradient to be more detailed than just a gradient between two colors. You should use colorStops instead, this allows you to specify exactly how you want your gradient to be. However, this option is, for now, not implemented on the Blazor version.

huangapple
  • 本文由 发表于 2023年7月24日 16:18:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76752584.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定