| 1 |
|
| 2 | <html lang="en">
|
| 3 |
|
| 4 | <head>
|
| 5 | <meta charset="UTF-8">
|
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 7 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 8 | <meta name="geometry" content="diagram">
|
| 9 | <link rel="stylesheet" href="./assets/common.css">
|
| 10 | <title>Polygon brush</title>
|
| 11 | </head>
|
| 12 |
|
| 13 | <body>
|
| 14 | <div id="canvas"></div>
|
| 15 | <script src="./assets/jquery-3.2.1.min.js"></script>
|
| 16 | <script src="./assets/data-set.min.js"></script>
|
| 17 | <script src="./assets/g2.min.js"></script>
|
| 18 | <script src="../build/g2-brush.js"></script>
|
| 19 | <script>
|
| 20 | const data = [[ 0, 0, 10 ], [ 0, 1, 19 ], [ 0, 2, 8 ], [ 0, 3, 24 ], [ 0, 4, 67 ], [ 1, 0, 92 ], [ 1, 1, 58 ], [ 1, 2, 78 ], [ 1, 3, 117 ], [ 1, 4, 48 ], [ 2, 0, 35 ], [ 2, 1, 15 ], [ 2, 2, 123 ], [ 2, 3, 64 ], [ 2, 4, 52 ], [ 3, 0, 72 ], [ 3, 1, 132 ], [ 3, 2, 114 ], [ 3, 3, 19 ], [ 3, 4, 16 ], [ 4, 0, 38 ], [ 4, 1, 5 ], [ 4, 2, 8 ], [ 4, 3, 117 ], [ 4, 4, 115 ], [ 5, 0, 88 ], [ 5, 1, 32 ], [ 5, 2, 12 ], [ 5, 3, 6 ], [ 5, 4, 120 ], [ 6, 0, 13 ], [ 6, 1, 44 ], [ 6, 2, 88 ], [ 6, 3, 98 ], [ 6, 4, 96 ], [ 7, 0, 31 ], [ 7, 1, 1 ], [ 7, 2, 82 ], [ 7, 3, 32 ], [ 7, 4, 30 ], [ 8, 0, 85 ], [ 8, 1, 97 ], [ 8, 2, 123 ], [ 8, 3, 64 ], [ 8, 4, 84 ], [ 9, 0, 47 ], [ 9, 1, 114 ], [ 9, 2, 31 ], [ 9, 3, 48 ], [ 9, 4, 91 ]];
|
| 21 | const source = [];
|
| 22 | for (let i = 0; i < data.length; i++) {
|
| 23 | const item = data[i];
|
| 24 | const obj = {};
|
| 25 | obj.name = item[0];
|
| 26 | obj.day = item[1];
|
| 27 | obj.sales = item[2];
|
| 28 | source.push(obj);
|
| 29 | }
|
| 30 | const chart = new G2.Chart({
|
| 31 | id: 'canvas',
|
| 32 | forceFit: true,
|
| 33 | height: window.innerHeight,
|
| 34 | padding: 100
|
| 35 | });
|
| 36 | chart.source(source, {
|
| 37 | name: {
|
| 38 | type: 'cat',
|
| 39 | values: [ 'Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura' ]
|
| 40 | },
|
| 41 | day: {
|
| 42 | type: 'cat',
|
| 43 | values: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday' ]
|
| 44 | }
|
| 45 | });
|
| 46 | chart.axis('name', {
|
| 47 | tickLine: null,
|
| 48 | label: {
|
| 49 | autoRotate: false,
|
| 50 | offset: 8,
|
| 51 | textStyle: {
|
| 52 | rotate: 90,
|
| 53 | textAlign: 'start'
|
| 54 | }
|
| 55 | },
|
| 56 | grid: {
|
| 57 | align: 'center',
|
| 58 | lineStyle: {
|
| 59 | lineWidth: 1,
|
| 60 | lineDash: null,
|
| 61 | stroke: '#f0f0f0'
|
| 62 | }
|
| 63 | }
|
| 64 | });
|
| 65 | chart.axis('day', {
|
| 66 | title: null,
|
| 67 | grid: {
|
| 68 | align: 'center',
|
| 69 | lineStyle: {
|
| 70 | lineWidth: 1,
|
| 71 | lineDash: null,
|
| 72 | stroke: '#f0f0f0'
|
| 73 | },
|
| 74 | hideFirstLine: false
|
| 75 | }
|
| 76 | });
|
| 77 | chart.legend(false);
|
| 78 | chart.polygon()
|
| 79 | .position('name*day')
|
| 80 | .color('sales', '#BAE7FF-#1890FF-#0050B3')
|
| 81 | .label('sales', {
|
| 82 | offset: -2,
|
| 83 | textStyle: {
|
| 84 | fill: '#fff',
|
| 85 | shadowBlur: 2,
|
| 86 | shadowColor: 'rgba(0, 0, 0, .45)'
|
| 87 | }
|
| 88 | })
|
| 89 | .style({
|
| 90 | lineWidth: 1,
|
| 91 | stroke: '#fff'
|
| 92 | });
|
| 93 | chart.render();
|
| 94 |
|
| 95 | new Brush({
|
| 96 | chart,
|
| 97 | canvas: chart.get('canvas'),
|
| 98 | style: {
|
| 99 | lineWidth: 1,
|
| 100 | stroke: '#999',
|
| 101 | fill: '#999',
|
| 102 | fillOpacity: 0.3
|
| 103 | },
|
| 104 | onBrushmove() {
|
| 105 | chart.hideTooltip();
|
| 106 | }
|
| 107 | });
|
| 108 | chart.on('plotdblclick', () => {
|
| 109 | chart.get('options').filters = {};
|
| 110 | chart.repaint();
|
| 111 | });
|
| 112 | </script>
|
| 113 | </body>
|
| 114 |
|
| 115 | </html>
|
| 116 |
|