チャート:カスタム系列

このデモは、カスタマイズした系列を含むチャートを示しています。各系列には、独自のツールチップコンテンツとデータ点の描画方法をカスタマイズするitemFormatterがあります。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as chart from '@grapecity/wijmo.chart'; import { getData } from './data'; import { Point } from '@grapecity/wijmo'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let theChart = new chart.FlexChart('#chart', { chartType: 'LineSymbols', itemsSource: getData(), bindingX: 'hour', legend: { position: 'Bottom' }, series: [ { binding: 't', name: '気温', tooltipContent: '{y}℃' }, { chartType: "Scatter", binding: 'wspeed', name: '風速', tooltipContent: '{wdir}<br/>{y} km/h', style: { strokeWidth: 1 }, symbolSize: 3, itemFormatter: (engine, ht, render) => { render(); var dir = ht.item.wdir; drawArrow(engine, ht.point, dir); } }, ], axisX: { title: '時' }, axisY: { title: '℃', majorGrid: false, min: 0, max: 20 }, }); // var p = new chart.PlotArea(); p.row = theChart.plotAreas.length; p.name = 'amounts'; p.height = '*'; p.style = { stroke: 'lightgray' }; theChart.plotAreas.push(p); // create a spacer plot area p = new chart.PlotArea(); p.row = theChart.plotAreas.length; p.name = 'spacer'; p.height = 25; theChart.plotAreas.push(p); // create a plot area for quantities p = new chart.PlotArea(); p.row = theChart.plotAreas.length; p.name = 'quantities'; p.height = '*'; p.style = { stroke: 'lightgray' }; var axy2 = new chart.Axis(chart.Position.Left); axy2.labels = true; axy2.title = 'km/h'; axy2.min = 0; axy2.max = 20; axy2.plotArea = p; theChart.series[1].axisY = axy2; theChart.plotAreas.push(p); } function drawArrow(engine, pt, dir) { let a = directioToAngle(dir); a *= Math.PI / 180; let sz = 12; let szar = 8; let x = sz * Math.cos(a); let y = sz * Math.sin(a); engine.strokeWidth = 1; engine.drawLine(pt.x - x, pt.y - y, pt.x + x, pt.y + y); let edge = new Point(pt.x + x, pt.y + y); let x1 = szar * Math.cos(a - 100); let y1 = szar * Math.sin(a - 100); let x2 = szar * Math.cos(a + 100); let y2 = szar * Math.sin(a + 100); engine.drawLine(edge.x, edge.y, edge.x - x1, edge.y - y1); engine.drawLine(edge.x, edge.y, edge.x - x2, edge.y - y2); } function directioToAngle(dir) { switch (dir) { case '東': return 0; case '東南東': return 22.5; case '南東': return 45; case '南南東': return 67.5; case '南': return 90; case '南南西': return 112.5; case '南西': return 135; case '西南西': return 157.5; case "西": return 180; case "西北西": return 202.5; case "北西": return 225; case "北北西": return 247.5; case "北": return 270; case "北北東": return 292.5; case "北東": return 315; case "東北東": return 337.5; } return 0; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Custom Series</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"> <div id="chart"></div> </div> </body> </html> export function getData() { return [ { "hour": 0, "condition": "Cloudy", "t": 8, "tfeel": 6, "precip": 5, "humidity": 85, "wdir": "東北東", "wspeed": 11 }, { "hour": 1, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 5, "humidity": 87, "wdir": "東北東", "wspeed": 10 }, { "hour": 2, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 5, "humidity": 88, "wdir": "東北東", "wspeed": 11 }, { "hour": 3, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 5, "humidity": 88, "wdir": "東北東", "wspeed": 11 }, { "hour": 4, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 10, "humidity": 91, "wdir": "東北東", "wspeed": 11 }, { "hour": 5, "condition": "Cloudy", "t": 6, "tfeel": 4, "precip": 15, "humidity": 92, "wdir": "東北東", "wspeed": 11 }, { "hour": 6, "condition": "Cloudy", "t": 6, "tfeel": 4, "precip": 15, "humidity": 92, "wdir": "東北東", "wspeed": 11 }, { "hour": 7, "condition": "Cloudy", "t": 7, "tfeel": 4, "precip": 15, "humidity": 93, "wdir": "東北東", "wspeed": 12 }, { "hour": 8, "condition": "Cloudy", "t": 7, "tfeel": 4, "precip": 20, "humidity": 93, "wdir": "東北東", "wspeed": 13 }, { "hour": 9, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 25, "humidity": 93, "wdir": "東北東", "wspeed": 13 }, { "hour": 10, "condition": "Cloudy", "t": 8, "tfeel": 5, "precip": 20, "humidity": 93, "wdir": "東北東", "wspeed": 14 }, { "hour": 11, "condition": "Cloudy", "t": 8, "tfeel": 6, "precip": 20, "humidity": 90, "wdir": "東北東", "wspeed": 15 }, { "hour": 12, "condition": "Cloudy", "t": 9, "tfeel": 7, "precip": 10, "humidity": 88, "wdir": "東北東", "wspeed": 16 }, { "hour": 13, "condition": "Cloudy", "t": 10, "tfeel": 8, "precip": 5, "humidity": 84, "wdir": "東北東", "wspeed": 16 }, { "hour": 14, "condition": "Cloudy", "t": 12, "tfeel": 10, "precip": 15, "humidity": 79, "wdir": "東北東", "wspeed": 15 }, { "hour": 15, "condition": "Cloudy", "t": 13, "tfeel": 11, "precip": 10, "humidity": 76, "wdir": "東北東", "wspeed": 15 }, { "hour": 16, "condition": "Cloudy", "t": 14, "tfeel": 13, "precip": 10, "humidity": 74, "wdir": "東北東", "wspeed": 12 }, { "hour": 17, "condition": "Cloudy", "t": 14, "tfeel": 14, "precip": 5, "humidity": 72, "wdir": "東北東", "wspeed": 10 }, { "hour": 18, "condition": "Mostly Cloudy", "t": 14, "tfeel": 14, "precip": 5, "humidity": 73, "wdir": "東北東", "wspeed": 8 }, { "hour": 19, "condition": "Mostly Cloudy", "t": 13, "tfeel": 13, "precip": 5, "humidity": 79, "wdir": "北東", "wspeed": 8 }, { "hour": 20, "condition": "Partly Cloudy", "t": 12, "tfeel": 11, "precip": 5, "humidity": 84, "wdir": "北北東", "wspeed": 9 }, { "hour": 21, "condition": "Partly Cloudy", "t": 11, "tfeel": 10, "precip": 10, "humidity": 90, "wdir": "北北東", "wspeed": 10 }, { "hour": 22, "condition": "Partly Cloudy", "t": 11, "tfeel": 9, "precip": 15, "humidity": 91, "wdir": "北東", "wspeed": 10 }, { "hour": 23, "condition": "Mostly Cloudy", "t": 10, "tfeel": 9, "precip": 25, "humidity": 93, "wdir": "北東", "wspeed": 11 } ]; } body { margin-bottom: 24px; }