<!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.
|
-->
|
|
|
<!--
|
This data and the design of this chart is copied from:
|
http://bl.ocks.org/syntagmatic/3150059
|
-->
|
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<script src="lib/esl.js"></script>
|
<script src="lib/config.js"></script>
|
<script src="lib/jquery.min.js"></script>
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<link rel="stylesheet" href="lib/reset.css">
|
</head>
|
<body>
|
<style>
|
body {
|
background: #333;
|
}
|
#main {
|
height: 1000px;
|
}
|
</style>
|
<div id="main"></div>
|
<script>
|
|
var echarts;
|
var colorTool;
|
var chart;
|
var myChart;
|
var groupCategories = [];
|
var groupColors = [];
|
|
require([
|
'echarts'
|
// 'zrender/tool/color',
|
// 'echarts/chart/parallel',
|
// 'echarts/component/legend',
|
// 'echarts/component/tooltip',
|
// 'echarts/component/toolbox',
|
// 'echarts/component/visualMap'
|
], function (ec) {
|
|
$.getJSON('./data/nutrients.json', function (data) {
|
echarts = ec;
|
colorTool = echarts.color;
|
|
normalizeData(data);
|
|
chart = myChart = echarts.init(document.getElementById('main'));
|
|
console.time('render');
|
chart.setOption(getOption(data));
|
console.timeEnd('render');
|
|
chart.on('axisAreaSelected', function (event) {
|
// var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
|
// console.log('北京: ', indices);
|
});
|
|
});
|
|
var indices = {
|
name: 0,
|
group: 1,
|
id: 16
|
};
|
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));
|
}
|
}
|
|
function getOption(data) {
|
|
var lineStyle = {
|
normal: {
|
width: 0.5,
|
opacity: 0.05
|
// shadowBlur: 10,
|
// shadowOffsetX: 0,
|
// shadowOffsetY: 0,
|
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
};
|
|
return {
|
backgroundColor: '#333',
|
tooltip: {
|
padding: 10,
|
backgroundColor: '#222',
|
borderColor: '#777',
|
borderWidth: 1,
|
formatter: function (obj) {
|
var value = obj[0].value;
|
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
+ schema[1].name + '：' + value[1] + '<br>'
|
+ schema[2].name + '：' + value[2] + '<br>'
|
+ schema[3].name + '：' + value[3] + '<br>'
|
+ schema[4].name + '：' + value[4] + '<br>'
|
+ schema[5].name + '：' + value[5] + '<br>'
|
+ schema[6].name + '：' + value[6] + '<br>';
|
}
|
},
|
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
|
}
|
},
|
animation: false,
|
series: [
|
{
|
name: 'nutrients',
|
type: 'parallel',
|
lineStyle: lineStyle,
|
inactiveOpacity: 0,
|
activeOpacity: 0.01,
|
progressive: 500,
|
smooth: true,
|
data: data
|
}
|
]
|
};
|
}
|
|
});
|
|
</script>
|
</body>
|
</html>
|
