Customize Style"
Raymondchao (talk | contribs) |
Raymondchao (talk | contribs) |
||
| Line 44: | Line 44: | ||
Gradient is a smooth color transition from one color to another. In ZK Charts, gradient could be defined by <tt>LinearGradient</tt> or <tt>RadialGradient</tt>, they have the similar attributes of SVG<ref>[http://www.w3.org/TR/SVG11/pservers.html#Gradients SVG Gradients]</ref>. | Gradient is a smooth color transition from one color to another. In ZK Charts, gradient could be defined by <tt>LinearGradient</tt> or <tt>RadialGradient</tt>, 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 <tt>x1</tt>, <tt>y2</tt>, <tt>x2</tt> and <tt>y2</tt> to define the start and end position of the gradient. It can be assigned like below: | ||
| + | <source lang="java"> | ||
| + | // 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); | ||
| + | </source> | ||
| + | |||
| + | The stop attributes can be assigned as below: | ||
| + | <source lang="java"> | ||
| + | // Same as lineraGradient.addStop(0, "#EEEEEE"); , lineraGradient.addStop(0, "#CCCCCC"); | ||
| + | lineraGradient.setStop("#EEEEEE", "#CCCCCC"); | ||
| + | </source> | ||
| + | |||
==== Radial Gradient ==== | ==== Radial Gradient ==== | ||
Revision as of 03:39, 6 March 2014
This page is under construction, so we cannot guarantee the accuracy of the content!
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(0, "#CCCCCC");
lineraGradient.setStop("#EEEEEE", "#CCCCCC");
Radial Gradient
References
< Get Complete Source Code of This Book >