Customize Style"
Raymondchao (talk | contribs) |
m (correct highlight (via JWB)) |
||
(17 intermediate revisions by one other user not shown) | |||
Line 9: | Line 9: | ||
Here are a list of the themes that you can choose from: | Here are a list of the themes that you can choose from: | ||
− | * Default | + | * Default Theme |
<source lang="java" line="false"> | <source lang="java" line="false"> | ||
chart.setTheme(Theme.DEFAULT); | chart.setTheme(Theme.DEFAULT); | ||
</source> | </source> | ||
− | * Grid | + | * Grid Theme |
<source lang="java" line="false"> | <source lang="java" line="false"> | ||
chart.setTheme(Theme.GRID); | chart.setTheme(Theme.GRID); | ||
</source> | </source> | ||
− | * Skies | + | * Skies Theme |
<source lang="java" line="false"> | <source lang="java" line="false"> | ||
chart.setTheme(Theme.SKIES); | chart.setTheme(Theme.SKIES); | ||
</source> | </source> | ||
− | * Gray | + | * Gray Theme |
<source lang="java" line="false"> | <source lang="java" line="false"> | ||
chart.setTheme(Theme.GRAY); | chart.setTheme(Theme.GRAY); | ||
</source> | </source> | ||
− | * Dark | + | * Dark Blue Theme |
<source lang="java" line="false"> | <source lang="java" line="false"> | ||
chart.setTheme(Theme.DARK_BLUE); | chart.setTheme(Theme.DARK_BLUE); | ||
</source> | </source> | ||
− | * Dark | + | * Dark Green Theme |
<source lang="java" line="false"> | <source lang="java" line="false"> | ||
chart.setTheme(Theme.DARK_GREEN); | chart.setTheme(Theme.DARK_GREEN); | ||
Line 35: | Line 35: | ||
== Customizing Colors == | == Customizing Colors == | ||
− | === Color === | + | 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. |
− | === Gradient === | + | === 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 <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 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"> | ||
+ | // 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(1, "#CCCCCC"); | ||
+ | lineraGradient.setStop("#EEEEEE", "#CCCCCC"); | ||
+ | </source> | ||
+ | |||
+ | ==== Radial Gradient ==== | ||
+ | Radial gradient is similar to linear gradient, the difference is that radial gradient specifies the attributes define the outermost circle: | ||
+ | <source lang="java" highlight="2"> | ||
+ | // cx=0.4, cy=0.3, cr=0.6 | ||
+ | RadialGradient radialGradient = new RadialGradient(0.4, 0.3, 0.6); | ||
+ | radialGradient.setStops("#EEEEEE", "#CCCCCC"); | ||
+ | </source> | ||
+ | |||
+ | == References == | ||
+ | <references/> | ||
+ | |||
{{ZKChartsEssentialsPageFooter}} | {{ZKChartsEssentialsPageFooter}} |
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 >