| |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <link rel="stylesheet" href="lib/reset.css"/> |
| <script src="lib/simpleRequire.js"></script> |
| <script src="lib/config.js"></script> |
| <script src="lib/facePrint.js"></script> |
| </head> |
| <body> |
| <style> |
| #main { |
| width: 900px; |
| height: 650px; |
| border: 9px solid #eee; |
| } |
| </style> |
| <div id="info"></div> |
| <div id="main"></div> |
| <script> |
| |
| /** |
| * @see <https://en.wikipedia.org/wiki/Michelson%E2%80%93Morley_experiment> |
| * @see <http://bl.ocks.org/mbostock/4061502> |
| */ |
| var chart; |
| var data; |
| var mean; |
| |
| require([ |
| 'echarts', |
| 'data/Michelson-Morley.json.js' |
| ], function (echarts, rawData) { |
| var env = echarts.env; |
| |
| chart = echarts.init(document.getElementById('main')); |
| |
| update('horizontal'); |
| |
| initControlPanel(env); |
| |
| function update(layout) { |
| |
| // mean = calculateMean(rawData); |
| |
| var categoryAxis = { |
| type: 'category', |
| boundaryGap: true, |
| nameGap: 30, |
| splitArea: { |
| show: false |
| }, |
| splitLine: { |
| show: false |
| } |
| }; |
| var valueAxis = { |
| type: 'value', |
| name: 'km/s minus 299,000', |
| splitArea: { |
| show: true |
| } |
| }; |
| |
| chart.setOption({ |
| aria: { |
| show: true |
| }, |
| dataset: [{ |
| source: rawData |
| }, { |
| transform: { |
| type: 'boxplot', |
| config: { itemNameFormatter: 'expr {value}' } |
| } |
| }, { |
| fromDatasetIndex: 1, |
| fromTransformResult: 1 |
| }], |
| title: [ |
| { |
| text: 'Michelson-Morley Experiment', |
| left: 'center' |
| }, |
| { |
| text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ', |
| borderColor: '#999', |
| borderWidth: 1, |
| textStyle: { |
| fontSize: 14 |
| }, |
| left: '10%', |
| top: '90%' |
| } |
| ], |
| legend: { |
| left: 'right' |
| }, |
| tooltip: { |
| trigger: 'item', |
| axisPointer: { |
| type: 'shadow' |
| } |
| }, |
| grid: { |
| left: '10%', |
| right: '10%', |
| bottom: '15%' |
| }, |
| xAxis: layout === 'horizontal' ? categoryAxis : valueAxis, |
| yAxis: layout === 'vertical' ? categoryAxis : valueAxis, |
| series: [ |
| { |
| name: 'boxplot', |
| type: 'boxplot', |
| datasetIndex: 1, |
| |
| markPoint: { |
| data: [ |
| { |
| name: '某个坐标', |
| coord: [2, 300] |
| }, |
| { |
| name: '某个屏幕坐标', |
| x: 100, |
| y: 200, |
| label: { |
| normal: { |
| show: false, |
| formatter: 'asdf' |
| }, |
| emphasis: { |
| show: true, |
| position: 'top', |
| formatter: 'zxcv' |
| } |
| } |
| }, |
| { |
| name: 'max value (default)', |
| type: 'max' |
| }, |
| { |
| name: 'min value (default)', |
| type: 'min' |
| }, |
| { |
| name: 'max value (dim:Q1)', |
| type: 'max', |
| valueDim: 'Q1' |
| }, |
| { |
| name: 'average value (dim:Q1)', |
| type: 'average', |
| valueDim: 'Q1' |
| } |
| ] |
| }, |
| |
| markLine: { |
| data: [ |
| [ |
| {name: '两个坐标之间的标线', coord: [1, 240]}, |
| {coord: [2, 260]} |
| ], |
| [ |
| {name: '两个屏幕坐标之间的标线', x: 50, y: 60}, |
| {x: 70, y: 90} |
| ], |
| [ |
| {name: 'max - min', type: 'max'}, |
| {type: 'min'} |
| ], |
| { |
| name: 'min line', |
| type: 'min' |
| }, |
| { |
| name: 'max line on dim:Q3', |
| type: 'max', |
| valueDim: 'Q3' |
| } |
| ] |
| } |
| |
| }, |
| { |
| name: 'outlier', |
| type: 'scatter', |
| datasetIndex: 2 |
| } |
| ] |
| }); |
| } |
| |
| // function calculateMean(rawData) { |
| // var sum = 0; |
| // var count = 0; |
| // for (var i = 0, len = rawData.length; i < len; i++) { |
| // for (var j = 0, lenj = rawData[i].length; j < lenj; j++) { |
| // var value = rawData[i][j]; |
| // count++; |
| // if (!isNaN(value) && value != null && value !== '') { |
| // sum += value; |
| // } |
| // } |
| // } |
| // return sum / count; |
| // }; |
| |
| |
| function initControlPanel(env) { |
| if (!env.browser.ie || env.browser.ie.version > 8) { |
| |
| var scr = document.createElement('script'); |
| scr.src = 'lib/dat.gui.min.js'; |
| scr.onload = function () { |
| var gui = new dat.GUI(); |
| var config = { |
| layout: 'horizontal' |
| }; |
| gui |
| .add(config, 'layout', ['horizontal', 'vertical']) |
| .onChange(update); |
| }; |
| document.head.appendChild(scr); |
| } |
| } |
| }); |
| |
| </script> |
| </body> |
| </html> |
