示例
Chart
Chart Features
Gridlines & Tickmarks

Gridlines and Tickmarks

By default, FlexChart uses horizontal lines to show the x-axis and major gridlines along the y-axis. This makes charts clean and easy-to-read.

You can change this by modifying the axisX and axisY properties. This example shows how you create and control major and minor gridlines along both axes, and how to customize them using CSS.

Learn about FlexChart | Gridlines and Tickmarks Documentation | FlexChart API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexChart, Palettes } from '@grapecity/wijmo.chart'; import { isArray, toggleClass } from '@grapecity/wijmo'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new FlexChart('#theChart', { axisX: { format: 'MMM dd', majorGrid: true, majorTickMarks: 'Cross', majorUnit: 7, minorGrid: true, minorTickMarks: 'None', minorUnit: 1, }, axisY: { min: 790, max: 860, format: 'c0', axisLine: true, majorGrid: true, majorTickMarks: 'Cross', majorUnit: 20, minorGrid: true, minorTickMarks: 'None', minorUnit: 5, }, itemsSource: getData(), bindingX: 'date', chartType: 'Candlestick', series: [ { binding: 'high,low,open,close', name: 'Alphabet Inc' } ], legend: { position: 'None' } }); theChart.palette = getRandomPalette(); // // toggle custom CSS, grid visibility onCheck('customGridlines', (checked) => toggleClass(theChart.hostElement, 'custom-gridlines', checked)); onCheck('x-major', (checked) => theChart.axisX.majorGrid = checked); onCheck('x-minor', (checked) => theChart.axisX.minorGrid = checked); onCheck('y-major', (checked) => theChart.axisY.majorGrid = checked); onCheck('y-minor', (checked) => theChart.axisY.minorGrid = checked); // onCheck('customUnits', (checked) => { if (checked) { theChart.axisX.majorUnit = 7; theChart.axisX.minorUnit = 1; theChart.axisY.majorUnit = 20; theChart.axisY.minorUnit = 5; } else { theChart.axisX.majorUnit = null; theChart.axisX.minorUnit = null; theChart.axisY.majorUnit = null; theChart.axisY.minorUnit = null; } }); // function onCheck(id, fn) { document.getElementById(id).addEventListener('click', e => { fn(e.target.checked); }); } } // function getRandomPalette() { let palettes = Object.keys(Palettes).filter(prop => isArray(Palettes[prop])); let rand = Math.floor(Math.random() * palettes.length); // return Palettes[palettes[rand]]; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexChart Gridlines and Tickmarks</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <h4> Gridlines </h4> <div class="row"> <div class="col-xs-4"> <label> <input id="customGridlines" type="checkbox" checked="checked"> Custom CSS </label><br /> <label> <input id="customUnits" type="checkbox" checked="checked"> Custom Units </label> </div> <div class="col-xs-4"> <label> <input id="x-major" type="checkbox" checked="checked"> X Major </label><br /> <label> <input id="x-minor" type="checkbox" checked="checked"> X Minor </label> </div> <div class="col-xs-4"> <label> <input id="y-major" type="checkbox" checked="checked"> Y Major </label><br /> <label> <input id="y-minor" type="checkbox" checked="checked"> Y Minor </label> </div> </div> <div id="theChart" class="custom-gridlines"></div> </div> </body> </html>
// some stock data from Google Finance export function getData() { return [ { date: new Date(2017, 2, 17), open: 851.61, high: 853.4, low: 847.11, close: 852.12, vol: 1716471 }, { date: new Date(2017, 2, 16), open: 849.03, high: 850.85, low: 846.13, close: 848.78, vol: 977560 }, { date: new Date(2017, 2, 15), open: 847.59, high: 848.63, low: 840.77, close: 847.2, vol: 1381474 }, { date: new Date(2017, 2, 14), open: 843.64, high: 847.24, low: 840.8, close: 845.62, vol: 780198 }, { date: new Date(2017, 2, 13), open: 844, high: 848.68, low: 843.25, close: 845.54, vol: 1223647 }, { date: new Date(2017, 2, 10), open: 843.28, high: 844.91, low: 839.5, close: 843.25, vol: 1704024 }, { date: new Date(2017, 2, 9), open: 836, high: 842, low: 834.21, close: 838.68, vol: 1261517 }, { date: new Date(2017, 2, 8), open: 833.51, high: 838.15, low: 831.79, close: 835.37, vol: 989773 }, { date: new Date(2017, 2, 7), open: 827.4, high: 833.41, low: 826.52, close: 831.91, vol: 1037630 }, { date: new Date(2017, 2, 6), open: 826.95, high: 828.88, low: 822.4, close: 827.78, vol: 1109037 }, { date: new Date(2017, 2, 3), open: 830.56, high: 831.36, low: 825.75, close: 829.08, vol: 896378 }, { date: new Date(2017, 2, 2), open: 833.85, high: 834.51, low: 829.64, close: 830.63, vol: 942476 }, { date: new Date(2017, 2, 1), open: 828.85, high: 836.26, low: 827.26, close: 835.24, vol: 1496540 }, { date: new Date(2017, 1, 28), open: 825.61, high: 828.54, low: 820.2, close: 823.21, vol: 2260769 }, { date: new Date(2017, 1, 27), open: 824.55, high: 830.5, low: 824, close: 829.28, vol: 1101466 }, { date: new Date(2017, 1, 24), open: 827.73, high: 829, low: 824.2, close: 828.64, vol: 1392202 }, { date: new Date(2017, 1, 23), open: 830.12, high: 832.46, low: 822.88, close: 831.33, vol: 1472771 }, { date: new Date(2017, 1, 22), open: 828.66, high: 833.25, low: 828.64, close: 830.76, vol: 987248 }, { date: new Date(2017, 1, 21), open: 828.66, high: 833.45, low: 828.35, close: 831.66, vol: 1262337 }, { date: new Date(2017, 1, 17), open: 823.02, high: 828.07, low: 821.66, close: 828.07, vol: 1611039 }, { date: new Date(2017, 1, 16), open: 819.93, high: 824.4, low: 818.98, close: 824.16, vol: 1287626 }, { date: new Date(2017, 1, 15), open: 819.36, high: 823, low: 818.47, close: 818.98, vol: 1313617 }, { date: new Date(2017, 1, 14), open: 819, high: 823, low: 816, close: 820.45, vol: 1054732 }, { date: new Date(2017, 1, 13), open: 816, high: 820.96, low: 815.49, close: 819.24, vol: 1213324 }, { date: new Date(2017, 1, 10), open: 811.7, high: 815.25, low: 809.78, close: 813.67, vol: 1134976 }, { date: new Date(2017, 1, 9), open: 809.51, high: 810.66, low: 804.54, close: 809.56, vol: 990391 }, { date: new Date(2017, 1, 8), open: 807, high: 811.84, low: 803.19, close: 808.38, vol: 1155990 }, { date: new Date(2017, 1, 7), open: 803.99, high: 810.5, low: 801.78, close: 806.97, vol: 1241221 }, { date: new Date(2017, 1, 6), open: 799.7, high: 801.67, low: 795.25, close: 801.34, vol: 1184483 }, { date: new Date(2017, 1, 3), open: 802.99, high: 806, low: 800.37, close: 801.49, vol: 1463448 } ]; }
.wj-flexchart { height: 300px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-tick, .custom-gridlines.wj-flexchart .wj-axis-y .wj-tick { stroke: darkgreen; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline { opacity: .25; stroke: darkgreen; stroke-width: 1px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline-minor, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline-minor { opacity: .25; stroke: darkgreen; stroke-dasharray: 0; stroke-width: .25px; } .wj-control { margin-bottom: 6px; } body { margin-bottom: 24pt; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);