| <!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>anychart.core.ui.MarkersFactory.type set asFunc</title>
|
| <link href="https://playground.anychart.com/api/core/ui/_samples/anychart.core.ui.MarkersFactory.type_set_asFunc/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.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.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-exports.min.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-ui.min.js"></script>
|
| <script type="text/javascript">anychart.onDocumentReady(function () {
|
| var chart = anychart.line();
|
|
|
| var series1 = chart.column([
|
| {x: 'January', value: 3},
|
| {x: 'February', value: 5},
|
| {x: 'March', value: 2},
|
| {x: 'April', value: 8},
|
| {x: 'May', value: 4}
|
| ]);
|
| series1.markers(true);
|
|
|
| var series2 = chart.column([
|
| {x: 'January', value: 4},
|
| {x: 'February', value: 2},
|
| {x: 'March', value: 5},
|
| {x: 'April', value: 3},
|
| {x: 'May', value: 7}
|
| ]);
|
|
|
| var markers = series2.markers();
|
| markers.enabled(true);
|
| markers.size(10);
|
| markers.fill('#FFEB3B');
|
|
|
|
|
| markers.type(function (path, x, y, size) {
|
| var point1 = {x: x + 1.1 * size, y: y - 0.4 * size};
|
| var point2 = {x: x - 0.5 * size, y: y - 0.5 * size};
|
| path.moveTo(point1.x, point1.y)
|
| .arcToByEndPoint(point2.x, point2.y, size, size, true, true)
|
| .arcToByEndPoint(point1.x, point1.y, size / 3, size / 3, false, false)
|
| .moveTo(point1.x, point1.y)
|
| .close();
|
| return path;
|
| });
|
|
|
| chart.title('Set type of marker');
|
| chart.container('container');
|
| chart.draw();
|
| });</script>
|
| </body>
|
| </html> |
