JavaScript

MIHA WANG
MIHA WANG
Front End Web Development Techdegree Graduate 13,475 Points

How to add the Data to the 'categoryB' and 'categoryC' in this chart?

Hey guys!! I dont know the question is allow or not at Treehouse. But I cant firgure out the question by myself.

I have some problem with this Chart. Actually its not a big problem, i just want to add the data to the 'categoryB' and 'categoryC'. But i dont know how to do. I will provide you the code and Github to this chart.

Code: <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="dist/echarts.min.js"></script> <script type="text/javascript" src="dist2/echarts-gl.min.js"></script> <script type="text/javascript" src="dist3/ecStat.min.js"></script> <script type="text/javascript" src="dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="map/js/china.js"></script> <script type="text/javascript" src="map/js/world.js"></script> <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>--> <script type="text/javascript" src="dist/extension/bmap.min.js"></script> <script type="text/javascript" src="test/lib/simplex.js"></script> <script type="text/javascript"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null;

var data = [ { name: 'e', value: [ 0, '2016/12/18 00:00:00', '2016/12/18 00:30:05', 5 ], itemStyle: { normal: { color: 'blue' } }}, { name: 'e', value: [ 0, '2016/12/18 01:00:00', '2016/12/18 01:30:05', '123wewe' ], itemStyle: { normal: { color: 'blue' } }} ]; var dataCount = 10; var startTime = +new Date(); var categories = ['categoryA', 'categoryB', 'categoryC']; var types = [ {name: 'JS Heap', color: '#7b9ce1'}, {name: 'Documents', color: '#bd6d6c'}, {name: 'Nodes', color: '#75d874'}, {name: 'Listeners', color: '#e0bc78'}, {name: 'GPU Memory', color: '#dc77dc'}, {name: 'GPU', color: '#72b362'} ]; var anchor = [ {name:'2016/12/18 00:00:00', value:['2016/12/18 00:00:00', 0]}, {name:'2016/12/19 00:00:00', value:['2016/12/19 00:00:00', 0]} ]; // Generate mock data /echarts.util.each(categories, function (category, index) { var baseTime = startTime; for (var i = 0; i < dataCount; i++) { var typeItem = types[Math.round(Math.random() * (types.length - 1))]; var duration = Math.round(Math.random() * 10000); data.push({ name: typeItem.name, value: [ index, baseTime, baseTime += duration, duration ], itemStyle: { normal: { color: typeItem.color } } }); baseTime += Math.round(Math.random() * 2000); } });/ console.log(data); function renderItem(params, api) { console.log(api); var categoryIndex = api.value(0); var start = api.coord([api.value(1), categoryIndex]); var end = api.coord([api.value(2), categoryIndex]); var height = api.size([0, 1])[1] * 0.6;

return {
    type: 'rect',
    shape: echarts.graphic.clipRectByRect({
        x: start[0],
        y: start[1] - height / 2,
        width: end[0] - start[0],
        height: height
    }, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
    }),
    style: api.style()
};

}

option = { tooltip: { formatter: function (params) { return params.marker + params.name + ': ' + params.value[3] + ' ms'; } }, title: { text: 'Profile', left: 'center' }, legend: { data: ['bar', 'error'] }, dataZoom: [{ type: 'slider', filterMode: 'weakFilter', showDataShadow: false, top: 400, height: 10, borderColor: 'transparent', backgroundColor: '#e2e2e2', handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line handleSize: 20, handleStyle: { shadowBlur: 6, shadowOffsetX: 1, shadowOffsetY: 2, shadowColor: '#aaa' }, labelFormatter: '' }, { type: 'inside', filterMode: 'weakFilter' }], grid: { height:300 }, xAxis: { type:'time', //min: startTime, scale: true, //axisLabel: { // formatter: function (val) { // return Math.max(0, val - startTime) + ' ms'; // } // } }, yAxis: { data: categories }, series: [{ type: 'custom', renderItem: renderItem, itemStyle: { normal: { opacity: 0.8 } }, encode: { x: [1, 2], y: 0 }, data: data },{ name:'.anchor', type:'line', showSymbol:false, data:anchor, itemStyle:{normal:{opacity:0}}, lineStyle:{normal:{opacity:0}} }] }; ; myChart.on('click',function(p){ console.log('click'); console.log(p) }); if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>

Github: https://github.com/suplex2825/chart-

Hope you guys can help me out and thank you so much!!!