英文:
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<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 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<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 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论