| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | <meta charset="UTF-8">
|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 7 | <link rel="stylesheet" href="./assets/codemirror-5.29.0/codemirror-merged.min.css">
|
| 8 | <link rel="stylesheet" href="./assets/bootstrap-4.0.0-beta/bootstrap.min.css">
|
| 9 | <link rel="stylesheet" href="./assets/bootstrap-4.0.0-beta/bootstrap-grid.min.css">
|
| 10 | <link rel="stylesheet" href="./assets/index.css">
|
| 11 | <title>Demos</title>
|
| 12 | </head>
|
| 13 | <body>
|
| 14 | <div id="code-list" style="display: none">
|
| 15 |
|
| 16 | <textarea id="code-ds-state"><!DOCTYPE html>
|
| 17 | <html lang="en">
|
| 18 |
|
| 19 | <head>
|
| 20 | <meta charset="UTF-8">
|
| 21 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 22 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 23 | <meta name="geometry" content="diagram">
|
| 24 | <link rel="stylesheet" href="./assets/common.css">
|
| 25 | <title>DataSet State</title>
|
| 26 | </head>
|
| 27 |
|
| 28 | <body>
|
| 29 | <div id="canvas1"></div>
|
| 30 | <div id="canvas2"></div>
|
| 31 | <script src="./assets/jquery-3.2.1.min.js"></script>
|
| 32 | <script src="./assets/data-set.min.js"></script>
|
| 33 | <script src="./assets/g2.min.js"></script>
|
| 34 | <script src="../build/g2-brush.js"></script>
|
| 35 | <script>
|
| 36 | $.getJSON('./data/sp500.json', function(data) {
|
| 37 | const ds = new DataSet({
|
| 38 | state: {
|
| 39 | dates: null
|
| 40 | }
|
| 41 | });
|
| 42 | const totalDv = ds.createView().source(data);
|
| 43 | const dv = ds.createView();
|
| 44 | dv.source(data)
|
| 45 | .transform({
|
| 46 | type: 'filter',
|
| 47 | callback: obj => {
|
| 48 | if (ds.state.dates) {
|
| 49 | return ds.state.dates.indexOf(obj.date) > -1;
|
| 50 | }
|
| 51 | return obj;
|
| 52 | }
|
| 53 | });
|
| 54 | const chart1 = new G2.Chart({
|
| 55 | container: 'canvas1',
|
| 56 | forceFit: true,
|
| 57 | height: window.innerHeight * (4 / 5),
|
| 58 | animate: false,
|
| 59 | padding: [ 50, 40, 50, 80 ]
|
| 60 | });
|
| 61 | chart1.source(dv, {
|
| 62 | date: {
|
| 63 | tickCount: 10,
|
| 64 | type: 'time',
|
| 65 | mask: 'MMM D YYYY'
|
| 66 | },
|
| 67 | price: {
|
| 68 | min: totalDv.min('price'),
|
| 69 | max: totalDv.max('price')
|
| 70 | }
|
| 71 | });
|
| 72 | chart1.area()
|
| 73 | .position('date*price')
|
| 74 | .shape('smooth')
|
| 75 | .opacity(0.85);
|
| 76 | chart1.render();
|
| 77 |
|
| 78 |
|
| 79 | const chart2 = new G2.Chart({
|
| 80 | container: 'canvas2',
|
| 81 | forceFit: true,
|
| 82 | height: window.innerHeight * (1.5 / 5),
|
| 83 | padding: [ 5, 40, 60, 80 ]
|
| 84 | });
|
| 85 | chart2.source(data, {
|
| 86 | date: {
|
| 87 | tickCount: 10,
|
| 88 | type: 'time',
|
| 89 | mask: 'YYYY'
|
| 90 | }
|
| 91 | });
|
| 92 | chart2.tooltip(false);
|
| 93 | chart2.axis('price', false);
|
| 94 | chart2.area()
|
| 95 | .position('date*price')
|
| 96 | .active(false)
|
| 97 | .shape('smooth')
|
| 98 | .opacity(0.85);
|
| 99 | chart2.render();
|
| 100 |
|
| 101 | new Brush({
|
| 102 | canvas: chart2.get('canvas'),
|
| 103 | chart: chart2,
|
| 104 | type: 'X',
|
| 105 | dragable: true,
|
| 106 | onBrushmove(ev) {
|
| 107 | const { date } = ev;
|
| 108 | ds.setState('dates', date);
|
| 109 | },
|
| 110 | onDragmove(ev) {
|
| 111 | const { date } = ev;
|
| 112 | ds.setState('dates', date);
|
| 113 | }
|
| 114 | });
|
| 115 | });
|
| 116 | </script>
|
| 117 | </body>
|
| 118 |
|
| 119 | </html>
|
| 120 |
|
| 121 | </textarea>
|
| 122 |
|
| 123 | <textarea id="code-filter-shape"><!DOCTYPE html>
|
| 124 | <html lang="en">
|
| 125 |
|
| 126 | <head>
|
| 127 | <meta charset="UTF-8">
|
| 128 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 129 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 130 | <meta name="geometry" content="diagram">
|
| 131 | <link rel="stylesheet" href="./assets/common.css">
|
| 132 | <title>Filter Shape</title>
|
| 133 | </head>
|
| 134 |
|
| 135 | <body>
|
| 136 | <div id="canvas"></div>
|
| 137 | <script src="./assets/jquery-3.2.1.min.js"></script>
|
| 138 | <script src="./assets/data-set.min.js"></script>
|
| 139 | <script src="./assets/g2.min.js"></script>
|
| 140 | <script src="../build/g2-brush.js"></script>
|
| 141 | <script>
|
| 142 | $.getJSON('./data/cars.json', function(data) {
|
| 143 | const chart = new G2.Chart({
|
| 144 | container: 'canvas',
|
| 145 | forceFit: true,
|
| 146 | height: window.innerHeight
|
| 147 | });
|
| 148 |
|
| 149 | const view1 = chart.view({
|
| 150 | end: {
|
| 151 | x: 0.45,
|
| 152 | y: 1
|
| 153 | }
|
| 154 | });
|
| 155 | view1.source(data);
|
| 156 | view1.tooltip(false);
|
| 157 | view1.point().position('Horsepower*Miles_per_Gallon');
|
| 158 |
|
| 159 | const view2 = chart.view({
|
| 160 | start: {
|
| 161 | x: 0.55,
|
| 162 | y: 0
|
| 163 | }
|
| 164 | });
|
| 165 |
|
| 166 | view2.source(data);
|
| 167 | view2.point().position('Acceleration*Displacement');
|
| 168 |
|
| 169 | chart.render();
|
| 170 |
|
| 171 | new Brush({
|
| 172 | canvas: chart.get('canvas'),
|
| 173 | dragable: true,
|
| 174 | onBrushstart(ev) {
|
| 175 | const { x, y } = ev;
|
| 176 | const views = chart.getViewsByPoint({ x, y });
|
| 177 | if (views.length > 1) {
|
| 178 | this.chart = views[1];
|
| 179 | const coord = views[1].get('coord');
|
| 180 | this.plot = {
|
| 181 | start: coord.start,
|
| 182 | end: coord.end
|
| 183 | };
|
| 184 | this.xScale = views[1].getXScale();
|
| 185 | this.yScale = views[1].getYScales()[0];
|
| 186 | }
|
| 187 | },
|
| 188 | onBrushmove(ev) {
|
| 189 | const { data } = ev;
|
| 190 | view2.filterShape(obj => {
|
| 191 | return data.indexOf(obj) > -1;
|
| 192 | });
|
| 193 | },
|
| 194 | onDragmove(ev) {
|
| 195 | const { data } = ev;
|
| 196 | view2.filterShape(obj => {
|
| 197 | return data.indexOf(obj) > -1;
|
| 198 | });
|
| 199 | }
|
| 200 | });
|
| 201 | });
|
| 202 | </script>
|
| 203 | </body>
|
| 204 |
|
| 205 | </html>
|
| 206 |
|
| 207 | </textarea>
|
| 208 |
|
| 209 | <textarea id="code-highlight"><!DOCTYPE html>
|
| 210 | <html lang="en">
|
| 211 |
|
| 212 | <head>
|
| 213 | <meta charset="UTF-8">
|
| 214 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 215 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 216 | <meta name="geometry" content="diagram">
|
| 217 | <link rel="stylesheet" href="./assets/common.css">
|
| 218 | <title>Scatter Matrix</title>
|
| 219 | </head>
|
| 220 |
|
| 221 | <body>
|
| 222 | <div id="toolbar">
|
| 223 | <button id="XY">矩形选择</button>
|
| 224 | <button id="X">横向选择</button>
|
| 225 | <button id="Y">纵向选择</button>
|
| 226 | <button id="POLYGON">圈选</button>
|
| 227 | <button id="clear">清除选择</button>
|
| 228 | </div>
|
| 229 | <div id="canvas"></div>
|
| 230 |
|
| 231 | <script src="./assets/jquery-3.2.1.min.js"></script>
|
| 232 | <script src="./assets/data-set.min.js"></script>
|
| 233 | <script src="./assets/g2.min.js"></script>
|
| 234 | <script src="../build/g2-brush.js"></script>
|
| 235 | <script>
|
| 236 | const Util = G2.Util;
|
| 237 | $.getJSON('./data/iris.json', function(data) {
|
| 238 | const chart = new G2.Chart({
|
| 239 | container: 'canvas',
|
| 240 | forceFit: true,
|
| 241 | height: window.innerHeight
|
| 242 | });
|
| 243 |
|
| 244 | chart.source(data, {
|
| 245 | Species: {
|
| 246 | sync: true
|
| 247 | }
|
| 248 | });
|
| 249 | chart.legend({
|
| 250 | hoverable: false
|
| 251 | });
|
| 252 | chart.facet('matrix', {
|
| 253 | fields: [ 'SepalLength', 'SepalWidth', 'PetalLength', 'PetalWidth' ],
|
| 254 | eachView(view, facet) {
|
| 255 | view.axis(facet.colField, {
|
| 256 | label: null,
|
| 257 | line: {
|
| 258 | lineWidth: 1,
|
| 259 | stroke: '#000'
|
| 260 | },
|
| 261 | tickLine: {
|
| 262 | lineWidth: 1,
|
| 263 | stroke: '#000',
|
| 264 | length: 4
|
| 265 | }
|
| 266 | });
|
| 267 | view.axis(facet.rowField, {
|
| 268 | label: null,
|
| 269 | line: {
|
| 270 | lineWidth: 1,
|
| 271 | stroke: '#000'
|
| 272 | },
|
| 273 | tickLine: {
|
| 274 | lineWidth: 1,
|
| 275 | stroke: '#000',
|
| 276 | length: 4
|
| 277 | }
|
| 278 | });
|
| 279 | if (facet.rowIndex === facet.colIndex) {
|
| 280 | view.point()
|
| 281 | .position(facet.colField + '*' + facet.colField)
|
| 282 | .color('Species', [ '#880000', '#008800', '#000088' ])
|
| 283 | .opacity(0.5)
|
| 284 | .shape('circle')
|
| 285 | .size(3)
|
| 286 | .active(false);
|
| 287 | } else {
|
| 288 | view.point()
|
| 289 | .position([ facet.colField, facet.rowField ])
|
| 290 | .color('Species', [ '#880000', '#008800', '#000088' ])
|
| 291 | .opacity(0.5)
|
| 292 | .shape('circle')
|
| 293 | .size(3)
|
| 294 | .active(false);
|
| 295 | }
|
| 296 | if ([ 0, 1, 2, 3 ].indexOf(facet.rowIndex) > -1 && facet.colIndex === 0) {
|
| 297 | view.guide().text({
|
| 298 | position: [ 3.7, 'median' ],
|
| 299 | content: facet.rowValue,
|
| 300 | style: {
|
| 301 | rotate: -90,
|
| 302 | fontSize: 12,
|
| 303 | fill: '#999',
|
| 304 | textAlign: 'center'
|
| 305 | }
|
| 306 | });
|
| 307 | }
|
| 308 | if ([ 0, 1, 2, 3 ].indexOf(facet.colIndex) > -1 && facet.rowIndex === 3) {
|
| 309 | view.guide().text({
|
| 310 | position: [ 'median', 'min' ],
|
| 311 | content: facet.colValue,
|
| 312 | style: {
|
| 313 | fontSize: 12,
|
| 314 | fill: '#999',
|
| 315 | textAlign: 'center'
|
| 316 | },
|
| 317 | offsetY: 20
|
| 318 | });
|
| 319 | }
|
| 320 | }
|
| 321 | });
|
| 322 | chart.render();
|
| 323 |
|
| 324 | let brush;
|
| 325 | function setBrushType(type) {
|
| 326 | if (!brush) {
|
| 327 | brush = new Brush({
|
| 328 | canvas: chart.get('canvas'),
|
| 329 | dragable: true,
|
| 330 | type,
|
| 331 | onBrushstart(ev) {
|
| 332 | chart.hideTooltip();
|
| 333 | const { x, y } = ev;
|
| 334 | const views = chart.getViewsByPoint({ x, y });
|
| 335 | if (views.length > 1) {
|
| 336 | this.chart = views[1];
|
| 337 | const coord = views[1].get('coord');
|
| 338 | this.plot = {
|
| 339 | start: coord.start,
|
| 340 | end: coord.end
|
| 341 | };
|
| 342 | this.xScale = views[1].getXScale();
|
| 343 | this.yScale = views[1].getYScales()[0];
|
| 344 | }
|
| 345 | },
|
| 346 | onBrushmove(ev) {
|
| 347 | chart.hideTooltip();
|
| 348 |
|
| 349 | const { data } = ev;
|
| 350 | chart.eachShape((record, shape) => {
|
| 351 | if (!shape.get('_originAttrs')) {
|
| 352 | shape.set('_originAttrs', Util.cloneDeep(shape.__attrs));
|
| 353 | }
|
| 354 | if (data.indexOf(record) === -1) {
|
| 355 | shape.attr('fill', '#ccc');
|
| 356 | } else {
|
| 357 | const originAttrs = shape.get('_originAttrs');
|
| 358 | shape.__attrs = Util.cloneDeep(originAttrs);
|
| 359 | }
|
| 360 | });
|
| 361 | },
|
| 362 | onDragmove(ev) {
|
| 363 | chart.hideTooltip();
|
| 364 |
|
| 365 | const { data } = ev;
|
| 366 | chart.eachShape((record, shape) => {
|
| 367 | if (!shape.get('_originAttrs')) {
|
| 368 | shape.set('_originAttrs', Util.cloneDeep(shape.__attrs));
|
| 369 | }
|
| 370 | if (data.indexOf(record) === -1) {
|
| 371 | shape.attr('fill', '#ccc');
|
| 372 | } else {
|
| 373 | const originAttrs = shape.get('_originAttrs');
|
| 374 | shape.__attrs = Util.cloneDeep(originAttrs);
|
| 375 | }
|
| 376 | });
|
| 377 | }
|
| 378 | });
|
| 379 | } else {
|
| 380 | if (type === 'clear') {
|
| 381 | brush.container.clear();
|
| 382 |
|
| 383 | } else {
|
| 384 | brush.setType(type);
|
| 385 |
|
| 386 | }
|
| 387 | }
|
| 388 | }
|
| 389 |
|
| 390 | $('#XY').click(() => {
|
| 391 | setBrushType('XY');
|
| 392 | });
|
| 393 | $('#Y').click(() => {
|
| 394 | setBrushType('Y');
|
| 395 | });
|
| 396 | $('#X').click(() => {
|
| 397 | setBrushType('X');
|
| 398 | });
|
| 399 | $('#POLYGON').click(() => {
|
| 400 | setBrushType('POLYGON');
|
| 401 | });
|
| 402 | $('#clear').click(() => {
|
| 403 | setBrushType('clear');
|
| 404 |
|
| 405 | chart.eachShape((record, shape) => {
|
| 406 | if (shape.get('_originAttrs')) {
|
| 407 | const originAttrs = shape.get('_originAttrs');
|
| 408 | shape.__attrs = Util.cloneDeep(originAttrs);
|
| 409 | }
|
| 410 | });
|
| 411 | });
|
| 412 | });
|
| 413 | </script>
|
| 414 | </body>
|
| 415 |
|
| 416 | </html>
|
| 417 |
|
| 418 | </textarea>
|
| 419 |
|
| 420 | <textarea id="code-interval"><!DOCTYPE html>
|
| 421 | <html lang="en">
|
| 422 |
|
| 423 | <head>
|
| 424 | <meta charset="UTF-8">
|
| 425 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 426 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 427 | <meta name="geometry" content="diagram">
|
| 428 | <link rel="stylesheet" href="./assets/common.css">
|
| 429 | <title>Interval Chart(X)</title>
|
| 430 | </head>
|
| 431 |
|
| 432 | <body>
|
| 433 | <div id="canvas"></div>
|
| 434 | <div style="width: 100%;text-align: center;">
|
| 435 | </div>
|
| 436 | <script src="./assets/jquery-3.2.1.min.js"></script>
|
| 437 | <script src="./assets/data-set.min.js"></script>
|
| 438 | <script src="./assets/g2.min.js"></script>
|
| 439 | <script src="../build/g2-brush.js"></script>
|
| 440 | <script>
|
| 441 | $.getJSON('./data/top2000.json', data => {
|
| 442 | const ds = new DataSet();
|
| 443 | const dv = ds.createView('test')
|
| 444 | .source(data)
|
| 445 | .transform({
|
| 446 | as: [ 'count' ],
|
| 447 | groupBy: [ 'release' ],
|
| 448 | operations: [ 'count' ],
|
| 449 | type: 'aggregate'
|
| 450 | });
|
| 451 |
|
| 452 | const chart = new G2.Chart({
|
| 453 | container: 'canvas',
|
| 454 | forceFit: true,
|
| 455 | height: window.innerHeight
|
| 456 | });
|
| 457 | chart.source(dv);
|
| 458 | chart.scale({
|
| 459 | count: {
|
| 460 | alias: 'top2000 唱片总量'
|
| 461 | },
|
| 462 | release: {
|
| 463 | tickInterval: 5,
|
| 464 | alias: '唱片发行年份'
|
| 465 | }
|
| 466 | });
|
| 467 | chart.interval()
|
| 468 | .position('release*count')
|
| 469 | .color('#e50000');
|
| 470 |
|
| 471 | chart.render();
|
| 472 |
|
| 473 | new Brush({
|
| 474 | canvas: chart.get('canvas'),
|
| 475 | chart,
|
| 476 | type: 'X',
|
| 477 | onBrushstart() {
|
| 478 | chart.hideTooltip();
|
| 479 | },
|
| 480 | onBrushmove() {
|
| 481 | chart.hideTooltip();
|
| 482 | }
|
| 483 | });
|
| 484 | chart.on('plotdblclick', () => {
|
| 485 | chart.get('options').filters = {};
|
| 486 | chart.repaint();
|
| 487 | });
|
| 488 | });
|
| 489 | </script>
|
| 490 | </body>
|
| 491 |
|
| 492 | </html>
|
| 493 |
|
| 494 | </textarea>
|
| 495 |
|
| 496 | <textarea id="code-line"><!DOCTYPE html>
|
| 497 | <html lang="en">
|
| 498 |
|
| 499 | <head>
|
| 500 | <meta charset="UTF-8">
|
| 501 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 502 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 503 | <meta name="geometry" content="diagram">
|
| 504 | <link rel="stylesheet" href="./assets/common.css">
|
| 505 | <title>Line Chart(XY)</title>
|
| 506 | </head>
|
| 507 |
|
| 508 | <body>
|
| 509 | <div id="canvas"></div>
|
| 510 | <script src="./assets/jquery-3.2.1.min.js"></script>
|
| 511 | <script src="./assets/data-set.min.js"></script>
|
| 512 | <script src="./assets/g2.min.js"></script>
|
| 513 | <script src="../build/g2-brush.js"></script>
|
| 514 | <script>
|
| 515 | $.getJSON('./data/avg-temp.json', function(data) {
|
| 516 | const { DataView } = DataSet;
|
| 517 | const dv = new DataView();
|
| 518 | dv.source(data)
|
| 519 | .transform({
|
| 520 | type: 'fold',
|
| 521 | key: 'city',
|
| 522 | value: 'value',
|
| 523 | fields: [ 'New York', 'San Francisco', 'Austin' ]
|
| 524 | });
|
| 525 | const chart = new G2.Chart({
|
| 526 | id: 'canvas',
|
| 527 | forceFit: true,
|
| 528 | height: 400,
|
| 529 | padding: [ 60, 30, 30 ]
|
| 530 | });
|
| 531 | chart.source(dv, {
|
| 532 | date: {
|
| 533 | type: 'time'
|
| 534 | },
|
| 535 | value: {
|
| 536 | alias: 'Temperature, ºF'
|
| 537 | }
|
| 538 | });
|
| 539 | chart.legend({
|
| 540 | position: 'top'
|
| 541 | });
|
| 542 | chart.axis('date', {
|
| 543 | line: {
|
| 544 | stroke: '#000'
|
| 545 | },
|
| 546 | tickLine: {
|
| 547 | stroke: '#000',
|
| 548 | value: 6
|
| 549 | },
|
| 550 | label: {
|
| 551 | textStyle: {
|
| 552 | textAlign: 'start'
|
| 553 | }
|
| 554 | }
|
| 555 | });
|
| 556 | chart.axis('value', {
|
| 557 | tickLine: {
|
| 558 | stroke: '#000',
|
| 559 | value: 6
|
| 560 | },
|
| 561 | label: {
|
| 562 | textStyle: {
|
| 563 | fill: '#000'
|
| 564 | }
|
| 565 | },
|
| 566 | line: {
|
| 567 | stroke: '#000'
|
| 568 | },
|
| 569 | grid: null
|
| 570 | });
|
| 571 | chart.line()
|
| 572 | .position('date*value')
|
| 573 | .color('city')
|
| 574 | .shape('spline')
|
| 575 | .size(2);
|
| 576 | chart.render();
|
| 577 |
|
| 578 | new Brush({
|
| 579 | canvas: chart.get('canvas'),
|
| 580 | style: {
|
| 581 | fill: '#ccc',
|
| 582 | fillOpacity: 0.4
|
| 583 | },
|
| 584 | chart
|
| 585 | });
|
| 586 | chart.on('plotdblclick', () => {
|
| 587 | chart.get('options').filters = {};
|
| 588 | chart.repaint();
|
| 589 | });
|
| 590 | });
|
| 591 | </script>
|
| 592 | </body>
|
| 593 | </html>
|
| 594 |
|
| 595 | </textarea>
|
| 596 |
|
| 597 | <textarea id="code-polygon"><!DOCTYPE html>
|
| 598 | <html lang="en">
|
| 599 |
|
| 600 | <head>
|
| 601 | <meta charset="UTF-8">
|
| 602 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 603 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 604 | <meta name="geometry" content="diagram">
|
| 605 | <link rel="stylesheet" href="./assets/common.css">
|
| 606 | <title>Polygon brush</title>
|
| 607 | </head>
|
| 608 |
|
| 609 | <body>
|
| 610 | <div id="canvas"></div>
|
| 611 | <script src="./assets/jquery-3.2.1.min.js"></script>
|
| 612 | <script src="./assets/data-set.min.js"></script>
|
| 613 | <script src="./assets/g2.min.js"></script>
|
| 614 | <script src="../build/g2-brush.js"></script>
|
| 615 | <script>
|
| 616 | 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 ]];
|
| 617 | const source = [];
|
| 618 | for (let i = 0; i < data.length; i++) {
|
| 619 | const item = data[i];
|
| 620 | const obj = {};
|
| 621 | obj.name = item[0];
|
| 622 | obj.day = item[1];
|
| 623 | obj.sales = item[2];
|
| 624 | source.push(obj);
|
| 625 | }
|
| 626 | const chart = new G2.Chart({
|
| 627 | id: 'canvas',
|
| 628 | forceFit: true,
|
| 629 | height: window.innerHeight,
|
| 630 | padding: 100
|
| 631 | });
|
| 632 | chart.source(source, {
|
| 633 | name: {
|
| 634 | type: 'cat',
|
| 635 | values: [ 'Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura' ]
|
| 636 | },
|
| 637 | day: {
|
| 638 | type: 'cat',
|
| 639 | values: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday' ]
|
| 640 | }
|
| 641 | });
|
| 642 | chart.axis('name', {
|
| 643 | tickLine: null,
|
| 644 | label: {
|
| 645 | autoRotate: false,
|
| 646 | offset: 8,
|
| 647 | textStyle: {
|
| 648 | rotate: 90,
|
| 649 | textAlign: 'start'
|
| 650 | }
|
| 651 | },
|
| 652 | grid: {
|
| 653 | align: 'center',
|
| 654 | lineStyle: {
|
| 655 | lineWidth: 1,
|
| 656 | lineDash: null,
|
| 657 | stroke: '#f0f0f0'
|
| 658 | }
|
| 659 | }
|
| 660 | });
|
| 661 | chart.axis('day', {
|
| 662 | title: null,
|
| 663 | grid: {
|
| 664 | align: 'center',
|
| 665 | lineStyle: {
|
| 666 | lineWidth: 1,
|
| 667 | lineDash: null,
|
| 668 | stroke: '#f0f0f0'
|
| 669 | },
|
| 670 | hideFirstLine: false
|
| 671 | }
|
| 672 | });
|
| 673 | chart.legend(false);
|
| 674 | chart.polygon()
|
| 675 | .position('name*day')
|
| 676 | .color('sales', '#BAE7FF-#1890FF-#0050B3')
|
| 677 | .label('sales', {
|
| 678 | offset: -2,
|
| 679 | textStyle: {
|
| 680 | fill: '#fff',
|
| 681 | shadowBlur: 2,
|
| 682 | shadowColor: 'rgba(0, 0, 0, .45)'
|
| 683 | }
|
| 684 | })
|
| 685 | .style({
|
| 686 | lineWidth: 1,
|
| 687 | stroke: '#fff'
|
| 688 | });
|
| 689 | chart.render();
|
| 690 |
|
| 691 | new Brush({
|
| 692 | chart,
|
| 693 | canvas: chart.get('canvas'),
|
| 694 | style: {
|
| 695 | lineWidth: 1,
|
| 696 | stroke: '#999',
|
| 697 | fill: '#999',
|
| 698 | fillOpacity: 0.3
|
| 699 | },
|
| 700 | onBrushmove() {
|
| 701 | chart.hideTooltip();
|
| 702 | }
|
| 703 | });
|
| 704 | chart.on('plotdblclick', () => {
|
| 705 | chart.get('options').filters = {};
|
| 706 | chart.repaint();
|
| 707 | });
|
| 708 | </script>
|
| 709 | </body>
|
| 710 |
|
| 711 | </html>
|
| 712 |
|
| 713 | </textarea>
|
| 714 |
|
| 715 | </div>
|
| 716 | <div class="main">
|
| 717 | <div class="container filter">
|
| 718 | <input id="query" class="form-control" type="text" placeholder="search">
|
| 719 | </div>
|
| 720 | <div class="row demo-thumbnails">
|
| 721 |
|
| 722 | <div class="demo-thumbnail col-md-4 col-sm-6 col-xs-12 text-center" data-basename="ds-state">
|
| 723 | <div class="card">
|
| 724 | <a href="#/ds-state" class="thumbnail-container">
|
| 725 | <img src="./assets/screenshots/ds-state.png" alt="">
|
| 726 | </a>
|
| 727 | <div class="card-body">
|
| 728 | <h6>ds-state</h6>
|
| 729 | </div>
|
| 730 | </div>
|
| 731 | </div>
|
| 732 |
|
| 733 | <div class="demo-thumbnail col-md-4 col-sm-6 col-xs-12 text-center" data-basename="filter-shape">
|
| 734 | <div class="card">
|
| 735 | <a href="#/filter-shape" class="thumbnail-container">
|
| 736 | <img src="./assets/screenshots/filter-shape.png" alt="">
|
| 737 | </a>
|
| 738 | <div class="card-body">
|
| 739 | <h6>filter-shape</h6>
|
| 740 | </div>
|
| 741 | </div>
|
| 742 | </div>
|
| 743 |
|
| 744 | <div class="demo-thumbnail col-md-4 col-sm-6 col-xs-12 text-center" data-basename="highlight">
|
| 745 | <div class="card">
|
| 746 | <a href="#/highlight" class="thumbnail-container">
|
| 747 | <img src="./assets/screenshots/highlight.png" alt="">
|
| 748 | </a>
|
| 749 | <div class="card-body">
|
| 750 | <h6>highlight</h6>
|
| 751 | </div>
|
| 752 | </div>
|
| 753 | </div>
|
| 754 |
|
| 755 | <div class="demo-thumbnail col-md-4 col-sm-6 col-xs-12 text-center" data-basename="interval">
|
| 756 | <div class="card">
|
| 757 | <a href="#/interval" class="thumbnail-container">
|
| 758 | <img src="./assets/screenshots/interval.png" alt="">
|
| 759 | </a>
|
| 760 | <div class="card-body">
|
| 761 | <h6>interval</h6>
|
| 762 | </div>
|
| 763 | </div>
|
| 764 | </div>
|
| 765 |
|
| 766 | <div class="demo-thumbnail col-md-4 col-sm-6 col-xs-12 text-center" data-basename="line">
|
| 767 | <div class="card">
|
| 768 | <a href="#/line" class="thumbnail-container">
|
| 769 | <img src="./assets/screenshots/line.png" alt="">
|
| 770 | </a>
|
| 771 | <div class="card-body">
|
| 772 | <h6>line</h6>
|
| 773 | </div>
|
| 774 | </div>
|
| 775 | </div>
|
| 776 |
|
| 777 | <div class="demo-thumbnail col-md-4 col-sm-6 col-xs-12 text-center" data-basename="polygon">
|
| 778 | <div class="card">
|
| 779 | <a href="#/polygon" class="thumbnail-container">
|
| 780 | <img src="./assets/screenshots/polygon.png" alt="">
|
| 781 | </a>
|
| 782 | <div class="card-body">
|
| 783 | <h6>polygon</h6>
|
| 784 | </div>
|
| 785 | </div>
|
| 786 | </div>
|
| 787 |
|
| 788 | </div>
|
| 789 | <div id="doc-container" style="display:none;">
|
| 790 | <div class="code-panel" id="code-panel">
|
| 791 | <div class="code-banner">
|
| 792 | <a class="btn btn-light" href="#">back</a>
|
| 793 | <button id="execute" class="btn btn-primary">execute</button>
|
| 794 | <button id="copy-code" class="btn btn-light">copy</button>
|
| 795 | </div>
|
| 796 | <div class="code-editor">
|
| 797 | <textarea name="code" id="code"></textarea>
|
| 798 | </div>
|
| 799 | </div>
|
| 800 | <div id="resize-handler"></div>
|
| 801 | <div id="chart-panel" class="preview"></div>
|
| 802 | </div>
|
| 803 | </div>
|
| 804 | <script src="./assets/codemirror-5.29.0/codemirror-merged.min.js"></script>
|
| 805 | <script src="./assets/lodash-4.17.4.min.js"></script>
|
| 806 | <script src="./assets/jquery-3.2.1.min.js"></script>
|
| 807 | <script src="./assets/jquery.resizable-0.20.0.js"></script>
|
| 808 | <script src="./assets/popper.js-1.12.5/popper.min.js"></script>
|
| 809 | <script src="./assets/bootstrap-4.0.0-beta/bootstrap.min.js"></script>
|
| 810 | <script src="./assets/clipboard-1.7.1.min.js"></script>
|
| 811 | <script src="./assets/routie-0.3.2.min.js"></script>
|
| 812 | <script src="./assets/index.js"></script>
|
| 813 | </body>
|
| 814 | </html>
|