[GitHub] [incubator-echarts] kuzmenkov111 edited a comment on issue #4954: Bar Chart with Error Bars

[GitBox <gi...@apache.org>]

kuzmenkov111 edited a comment on issue #4954: Bar Chart with Error Bars
URL: https://github.com/apache/incubator-echarts/issues/4954#issuecomment-573264539
 
 
   Hello! Is it possible to make Grouped Error Bar? In the documentation (https://echarts.apache.org/examples/en/editor.html?c=custom-error-bar) only a single category Error Bar Plot (non-grouped Error Bar) exists. Modification of code doesn't solve the problem: the error range can't be aligned on appropriate bar.
   
   ```
   var categoryData = [];
   var errorData = [];
   var barData = [];
   var dataCount = 100;
   for (var i = 0; i < dataCount; i++) {
       var val = Math.random() * 1000;
       categoryData.push('category' + i);
       errorData.push([
           i,
           echarts.number.round(Math.max(0, val - Math.random() * 100)),
           echarts.number.round(val + Math.random() * 80)
       ]);
       barData.push(echarts.number.round(val, 2));
   }
   var categoryData2 = [];
   var errorData2 = [];
   var barData2 = [];
   var dataCount2 = 100;
   for (var i = 0; i < dataCount2; i++) {
       var val = Math.random() * 1000;
       categoryData2.push('category' + i);
       errorData2.push([
           i,
           echarts.number.round(Math.max(0, val - Math.random() * 100)),
           echarts.number.round(val + Math.random() * 80)
       ]);
       barData2.push(echarts.number.round(val, 2));
   }
   
   function renderItem(params, api) {
       console.log(params);
       var xValue = api.value(0);
       var highPoint = api.coord([xValue, api.value(1)]);
       var lowPoint = api.coord([xValue, api.value(2)]);
       var halfWidth = api.size([1, 0])[0] * 0.1;
       var style = api.style({
           stroke: api.visual('color'),
           fill: null
       });
   console.log(highPoint);
       return {
           type: 'group',
           children: [{
               type: 'line',
               shape: {
                   x1: highPoint[0] - halfWidth, y1: highPoint[1],
                   x2: highPoint[0] + halfWidth, y2: highPoint[1]
               },
               style: style
           }, {
               type: 'line',
               shape: {
                   x1: highPoint[0], y1: highPoint[1],
                   x2: lowPoint[0], y2: lowPoint[1]
               },
               style: style
           }, {
               type: 'line',
               shape: {
                   x1: lowPoint[0] - halfWidth, y1: lowPoint[1],
                   x2: lowPoint[0] + halfWidth, y2: lowPoint[1]
               },
               style: style
           }]
       };
   }
   
   option = {
       tooltip: {
           trigger: 'axis',
           axisPointer: {
               type: 'shadow'
           }
       },
       title: {
           text: 'Error bar chart'
       },
       legend: {
           data: ['bar', 'bar2', 'error']
       },
       dataZoom: [{
           type: 'slider',
           start: 50,
           end: 70
       }, {
           type: 'inside',
           start: 50,
           end: 70
       }],
       xAxis: {
           data: categoryData
       },
       yAxis: {},
       series: [{
           id: 'bar',
           type: 'bar',
           name: 'bar',
           data: barData,
           itemStyle: {
               color: '#77bef7'
           }
       }, {
           id: 'bar2',
           type: 'bar',
           name: 'bar2',
           data: barData2,
           itemStyle: {
               color: '#77bef7'
           }
       }, {
           type: 'custom',
           name: 'bar',
           itemStyle: {
               normal: {
                   borderWidth: 1.5
               }
           },
           renderItem: renderItem,
           encode: {
               x: 0,
               y: [1, 2]
           },
           data: errorData,
           z: 100
       },{
           type: 'custom',
           name: 'bar2',
           itemStyle: {
               normal: {
                   borderWidth: 1.5
               }
           },
           renderItem: renderItem,
           encode: {
               x: 0,
               y: [1, 2]
           },
           data: errorData2,
           z: 100
       }]
   };
   
   ```
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org