| <!DOCTYPE html> | |
| <!-- | |
| 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" /> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/jquery.min.js"></script> | |
| <script src="lib/facePrint.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <script src="lib/canteen.js"></script> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <div id="main0"></div> | |
| <div id="record"></div> | |
| <script> | |
| var recordContainer = document.getElementById('record'); | |
| var chart; | |
| testHelper.controlFrame({ | |
| pauseAt: 1, | |
| onFrame: function (frameNumber) { | |
| testHelper.printCanvasLayerDrawOperationsOnFrame(chart, frameNumber, recordContainer); | |
| } | |
| }); | |
| require([ | |
| 'echarts', | |
| './data/nutrients.json' | |
| ], function (echarts, rawData) { | |
| colorTool = echarts.color; | |
| const _ctx = { | |
| rawDataCount: { | |
| text: 'rawDataCount:', | |
| value: undefined, | |
| values: [undefined, 10, 100, 1e3, 5e3], | |
| // value: 10, | |
| // values: [10, 100, 1e3, 5e3], | |
| }, | |
| br0: {}, | |
| hoverLayerThreshold: { | |
| text: 'hoverLayerThreshold:', | |
| value: undefined, | |
| values: [undefined, 300, 1000, 0], | |
| }, | |
| large: { | |
| text: 'large:', | |
| value: true, | |
| values: [true, false], | |
| }, | |
| largeThreshold: { | |
| text: 'largeThreshold:', | |
| value: undefined, | |
| values: [undefined, 1, 1000], | |
| }, | |
| progressive: { | |
| text: 'progressive:', | |
| value: 100, | |
| values: [1e4, 100, 300, undefined, 0, 1, 1000, 1e4], | |
| }, | |
| progressiveThreshold: { | |
| text: 'progressiveThreshold:', | |
| value: undefined, | |
| values: [undefined, 1, 1000], | |
| }, | |
| }; | |
| function createOption() { | |
| var groupCategories = []; | |
| var groupColors = []; | |
| var largeSettingsSeries = {}; | |
| if (_ctx.large.value != null) { | |
| largeSettingsSeries.large = _ctx.large.value; | |
| } | |
| if (_ctx.largeThreshold.value != null) { | |
| largeSettingsSeries.largeThreshold = _ctx.largeThreshold.value; | |
| } | |
| if (_ctx.progressive.value != null) { | |
| largeSettingsSeries.progressive = _ctx.progressive.value; | |
| } | |
| if (_ctx.progressiveThreshold.value != null) { | |
| largeSettingsSeries.progressiveThreshold = _ctx.progressiveThreshold.value; | |
| } | |
| var largeSettingsGlobal = {}; | |
| if (_ctx.hoverLayerThreshold.value != null) { | |
| largeSettingsSeries.hoverLayerThreshold = _ctx.hoverLayerThreshold.value; | |
| } | |
| var indices = { | |
| name: 0, | |
| group: 1, | |
| id: 16 | |
| }; | |
| normalizeData(rawData); | |
| var schema = [ | |
| {name: 'name', index: 0}, | |
| {name: 'group', index: 1}, | |
| {name: 'protein', index: 2}, | |
| {name: 'calcium', index: 3}, | |
| {name: 'sodium', index: 4}, | |
| {name: 'fiber', index: 5}, | |
| {name: 'vitaminc', index: 6}, | |
| {name: 'potassium', index: 7}, | |
| {name: 'carbohydrate', index: 8}, | |
| {name: 'sugars', index: 9}, | |
| {name: 'fat', index: 10}, | |
| {name: 'water', index: 11}, | |
| {name: 'calories', index: 12}, | |
| {name: 'saturated', index: 13}, | |
| {name: 'monounsat', index: 14}, | |
| {name: 'polyunsat', index: 15}, | |
| {name: 'id', index: 16} | |
| ]; | |
| function normalizeData(originData) { | |
| var groupMap = {}; | |
| originData.forEach(row => { | |
| var groupName = row[indices.group]; | |
| if (!groupMap.hasOwnProperty(groupName)) { | |
| groupMap[groupName] = 1; | |
| } | |
| }); | |
| originData.forEach(row => { | |
| row.forEach((item, index) => { | |
| if (index !== indices.name | |
| && index !== indices.group | |
| && index !== indices.id | |
| ) { | |
| // Convert null to zero, as all of them under unit "g". | |
| row[index] = parseFloat(item) || 0; | |
| } | |
| }); | |
| }); | |
| for (var groupName in groupMap) { | |
| if (groupMap.hasOwnProperty(groupName)) { | |
| groupCategories.push(groupName); | |
| } | |
| } | |
| var hStep = Math.round(300 / (groupCategories.length - 1)); | |
| for (var i = 0; i < groupCategories.length; i++) { | |
| groupColors.push(colorTool.modifyHSL('#5A94DF', hStep * i)); | |
| } | |
| } | |
| var lineStyle = { | |
| normal: { | |
| width: 0.5, | |
| opacity: 0.05 | |
| // shadowBlur: 10, | |
| // shadowOffsetX: 0, | |
| // shadowOffsetY: 0, | |
| // shadowColor: 'rgba(0, 0, 0, 0.5)' | |
| } | |
| }; | |
| console.log('rawDataCount: ' + rawData.length); | |
| var currentData = rawData; | |
| if (_ctx.rawDataCount.value != null) { | |
| currentData = rawData.slice(0, _ctx.rawDataCount.value); | |
| } | |
| console.log('current displayed data count: ' + currentData.length); | |
| var option = { | |
| ...largeSettingsGlobal, | |
| animation: false, | |
| backgroundColor: '#333', | |
| // tooltip: { | |
| // padding: 10, | |
| // backgroundColor: '#222', | |
| // borderColor: '#777', | |
| // borderWidth: 1 | |
| // }, | |
| title: [ | |
| { | |
| text: 'Groups', | |
| top: 0, | |
| left: 0, | |
| textStyle: { | |
| color: '#fff' | |
| } | |
| } | |
| ], | |
| visualMap: { | |
| show: true, | |
| type: 'piecewise', | |
| categories: groupCategories, | |
| dimension: indices.group, | |
| inRange: { | |
| color: groupColors //['#d94e5d','#eac736','#50a3ba'] | |
| }, | |
| outOfRange: { | |
| color: ['#ccc'] //['#d94e5d','#eac736','#50a3ba'] | |
| }, | |
| top: 20, | |
| textStyle: { | |
| color: '#fff' | |
| }, | |
| realtime: false | |
| }, | |
| parallelAxis: [ | |
| {dim: 16, name: schema[16].name, scale: true, nameLocation: 'end'}, | |
| {dim: 2, name: schema[2].name, nameLocation: 'end'}, | |
| {dim: 4, name: schema[4].name, nameLocation: 'end'}, | |
| {dim: 3, name: schema[3].name, nameLocation: 'end'}, | |
| {dim: 5, name: schema[5].name, nameLocation: 'end'}, | |
| {dim: 6, name: schema[6].name, nameLocation: 'end'}, | |
| {dim: 7, name: schema[7].name, nameLocation: 'end'}, | |
| {dim: 8, name: schema[8].name, nameLocation: 'end'}, | |
| {dim: 9, name: schema[9].name, nameLocation: 'end'}, | |
| {dim: 10, name: schema[10].name, nameLocation: 'end'}, | |
| {dim: 11, name: schema[11].name, nameLocation: 'end'}, | |
| {dim: 12, name: schema[12].name, nameLocation: 'end'}, | |
| {dim: 13, name: schema[13].name, nameLocation: 'end'}, | |
| {dim: 14, name: schema[14].name, nameLocation: 'end'}, | |
| {dim: 15, name: schema[15].name, nameLocation: 'end'} | |
| ], | |
| parallel: { | |
| left: 280, | |
| top: 20, | |
| // top: 150, | |
| // height: 300, | |
| width: 400, | |
| layout: 'vertical', | |
| parallelAxisDefault: { | |
| type: 'value', | |
| name: 'nutrients', | |
| nameLocation: 'end', | |
| nameGap: 20, | |
| nameTextStyle: { | |
| color: '#fff', | |
| fontSize: 14 | |
| }, | |
| axisLine: { | |
| lineStyle: { | |
| color: '#aaa' | |
| } | |
| }, | |
| axisTick: { | |
| lineStyle: { | |
| color: '#777' | |
| } | |
| }, | |
| splitLine: { | |
| show: false | |
| }, | |
| axisLabel: { | |
| textStyle: { | |
| color: '#fff' | |
| } | |
| }, | |
| realtime: false | |
| } | |
| }, | |
| series: [{ | |
| ...largeSettingsSeries, | |
| name: 'nutrients', | |
| type: 'parallel', | |
| lineStyle: lineStyle, | |
| // inactiveOpacity: 0, | |
| // activeOpacity: 0.01, | |
| smooth: true, | |
| data: currentData | |
| }] | |
| }; | |
| return option; | |
| } | |
| function updateChart() { | |
| chart.setOption(createOption(), {notMerge: true}); | |
| } | |
| chart = testHelper.create(echarts, 'main0', { | |
| title: [ | |
| 'Click **Resume**', | |
| 'parallels', | |
| ], | |
| option: createOption(), | |
| height: 350, | |
| // recordCanvas: true | |
| inputsStyle: 'compact', | |
| inputs: testHelper.createInputsSimply(_ctx, updateChart), | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |