Customize Style"
Raymondchao (talk | contribs) |
m (correct highlight (via JWB)) |
||
Line 35: | Line 35: | ||
== Customizing Colors == | == Customizing Colors == | ||
− | ZK Charts use < | + | ZK Charts use <code>Color</code> class to apply the color to the color-changing method in the option, such as <code>setBackgroundColor()</code> or <code>setFillColor()</code>. <code>Color</code> supports solid color and gradient color. |
=== Solid Color === | === Solid Color === | ||
Solid color can be specified as an RGB triplet, in hexadecimal format or any valid color format in browsers: | Solid color can be specified as an RGB triplet, in hexadecimal format or any valid color format in browsers: | ||
Line 42: | Line 42: | ||
=== Gradient Color === | === Gradient Color === | ||
− | Gradient is a smooth color transition from one color to another. In ZK Charts, gradient could be defined by < | + | Gradient is a smooth color transition from one color to another. In ZK Charts, gradient could be defined by <code>LinearGradient</code> or <code>RadialGradient</code>, they have the similar attributes of SVG<ref>[http://www.w3.org/TR/SVG11/pservers.html#Gradients SVG Gradients]</ref>. |
==== Linear Gradient ==== | ==== Linear Gradient ==== | ||
− | Linear gradient contains attributes < | + | Linear gradient contains attributes <code>x1</code>, <code>y2</code>, <code>x2</code> and <code>y2</code> to define the start and end position of the gradient. It can be assigned like below: |
<source lang="java"> | <source lang="java"> | ||
// Create a linear gradient which x1=0, y1=0, x2 = 0, y2=1 with percentages represent values | // Create a linear gradient which x1=0, y1=0, x2 = 0, y2=1 with percentages represent values | ||
Line 61: | Line 61: | ||
==== Radial Gradient ==== | ==== Radial Gradient ==== | ||
Radial gradient is similar to linear gradient, the difference is that radial gradient specifies the attributes define the outermost circle: | Radial gradient is similar to linear gradient, the difference is that radial gradient specifies the attributes define the outermost circle: | ||
− | <source lang="java" | + | <source lang="java" highlight="2"> |
// cx=0.4, cy=0.3, cr=0.6 | // cx=0.4, cy=0.3, cr=0.6 | ||
RadialGradient radialGradient = new RadialGradient(0.4, 0.3, 0.6); | RadialGradient radialGradient = new RadialGradient(0.4, 0.3, 0.6); |
Latest revision as of 02:57, 18 January 2022
Switching Bwteen Themes
ZK Charts provides many predefined color themes for use.
Here are a list of the themes that you can choose from:
- Default Theme
1 chart.setTheme(Theme.DEFAULT);
- Grid Theme
1 chart.setTheme(Theme.GRID);
- Skies Theme
1 chart.setTheme(Theme.SKIES);
- Gray Theme
1 chart.setTheme(Theme.GRAY);
- Dark Blue Theme
1 chart.setTheme(Theme.DARK_BLUE);
- Dark Green Theme
1 chart.setTheme(Theme.DARK_GREEN);
Customizing Colors
ZK Charts use Color
class to apply the color to the color-changing method in the option, such as setBackgroundColor()
or setFillColor()
. Color
supports solid color and gradient color.
Solid Color
Solid color can be specified as an RGB triplet, in hexadecimal format or any valid color format in browsers:
- RGB triplet - rgb(186,86,150)
- Hexadecimal format - #58BA7A
Gradient Color
Gradient is a smooth color transition from one color to another. In ZK Charts, gradient could be defined by LinearGradient
or RadialGradient
, they have the similar attributes of SVG[1].
Linear Gradient
Linear gradient contains attributes x1
, y2
, x2
and y2
to define the start and end position of the gradient. It can be assigned like below:
// Create a linear gradient which x1=0, y1=0, x2 = 0, y2=1 with percentages represent values
LinearGradient linearGradient2 = new LinearGradient(0, 0, 0, 1);
// Create a linear gradient which x1=0, y1=0, x2 = 0, y2=300 with coordinate
LinearGradient linearGradient2 = new LinearGradient(0, 0, 0, 300);
The stop attributes can be assigned as below:
// Same as lineraGradient.addStop(0, "#EEEEEE"); lineraGradient.addStop(1, "#CCCCCC");
lineraGradient.setStop("#EEEEEE", "#CCCCCC");
Radial Gradient
Radial gradient is similar to linear gradient, the difference is that radial gradient specifies the attributes define the outermost circle:
// cx=0.4, cy=0.3, cr=0.6
RadialGradient radialGradient = new RadialGradient(0.4, 0.3, 0.6);
radialGradient.setStops("#EEEEEE", "#CCCCCC");
References
< Get Complete Source Code of This Book >