| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta content="IE=edge" http-equiv="X-UA-Compatible">
|
| <meta content="width=device-width, initial-scale=1" name="viewport">
|
| <title>AS Background 05</title>
|
| <link href="https://playground.anychart.com/docs/samples/AS_Background_05/iframe" rel="canonical">
|
| <meta content="Line Chart" name="keywords">
|
| <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
|
| |
| |
| |
|
|
| <link href="_deps/cdn.anychart.com/releases/8.14.1/css/anychart-ui.min_qe95e7e741b.css" rel="stylesheet" type="text/css">
|
| <style>html, body, #container {
|
| width: 100%;
|
| height: 100%;
|
| margin: 0;
|
| padding: 0;
|
| }</style>
|
| </head>
|
| <body>
|
| <div id="container"></div>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-base.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-exports.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-ui.min_qe95e7e741b.js"></script>
|
| <script type="text/javascript">anychart.onDocumentReady(function () {
|
|
|
|
|
| var data = [
|
| ["P1", 16, 20],
|
| ["P2", 12, 18],
|
| ["P3", 7, 14],
|
| ["P4", 8, 16],
|
| ["P5", 11, 19],
|
| ["P6", 10, 23],
|
| ["P7", 6, 17],
|
| ["P8", 3, 11]
|
| ];
|
|
|
|
|
| var chart = anychart.line();
|
| chart.data(data);
|
|
|
|
|
| chart.title("Image Fill");
|
| chart.title().padding(5);
|
| chart.title().enabled(true);
|
|
|
| chart.title().background().enabled(true);
|
| chart.title().background().fill("gold");
|
|
|
|
|
| chart.background().fill({
|
| src: "./7_1.jpg",
|
| mode: "stretch"
|
| });
|
|
|
|
|
| chart.xGrid().enabled(true);
|
| chart.xGrid().stroke("#ffffff");
|
| chart.xGrid().palette(["#ffffff 0.6"]);
|
| chart.yGrid().enabled(true);
|
| chart.yGrid().stroke("#ffffff");
|
|
|
|
|
| chart.xAxis().labels().fontColor("#fff");
|
| chart.xAxis().labels().fontWeight(900);
|
|
|
| chart.yAxis().labels().fontColor("white");
|
| chart.yAxis().labels().fontWeight(900);
|
|
|
| chart.yAxis().stroke("white");
|
| chart.yAxis().ticks().stroke("white");
|
|
|
|
|
| chart.container("container");
|
| chart.draw();
|
| });</script>
|
| </body>
|
| </html> |
