File size: 2,605 Bytes
79dc9c8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!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">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<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');
// Set type of marker.
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> |