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

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

jlinphd edited a comment on issue #4954:
URL: https://github.com/apache/incubator-echarts/issues/4954#issuecomment-713721742


   I've created a function that can render a grouped bar chart with error bars. It's not ideal, because you need to pass to the render function the index of the data series it's associated with and the number of series there are, but it's good enough for my purposes. Hope this is useful to folks.
   
   ```
   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 renderErrorBar(errorGroup, numErrorGroups, params, api) {
     const xValue = api.value(0);
     const highPoint = api.coord([xValue, api.value(1)]);
     const lowPoint = api.coord([xValue, api.value(2)]);
     
     const labelWidth = api.size([1, 0])[0];
     
     const barGap = labelWidth * 0.05;
     const barWidth = (labelWidth / numErrorGroups) - barGap;
     highPoint[0] = highPoint[0] - (barWidth / 2) + (errorGroup * barWidth);
     lowPoint[0] = highPoint[0];
     
     const errorBarWidth = labelWidth * 0.05;
     
     const style = api.style({
       stroke: api.visual('color'),
       fill: null
     });
   
     return {
       type: 'group',
       children: [{
         type: 'line',
         shape: {
           x1: highPoint[0] - errorBarWidth, y1: highPoint[1],
           x2: highPoint[0] + errorBarWidth, 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] - errorBarWidth, y1: lowPoint[1],
           x2: lowPoint[0] + errorBarWidth, y2: lowPoint[1]
         },
         style: style
       }]
     };
   }
   
   option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       }
     },
     title: {
       text: 'Error bar chart'
     },
     legend: {
       data: ['bar', 'bar2']
     },
     dataZoom: [{
       type: 'slider',
       start: 50,
       end: 54
     }, {
       type: 'inside',
       start: 50,
       end: 54
     }],
     xAxis: {
       data: categoryData
     },
     yAxis: {},
     series: [{
       type: 'bar',
       name: 'before',
       data: barData,
       itemStyle: {
         color: '#0000aa'
       }
     }, {
       type: 'bar',
       name: 'after',
       data: barData2,
       itemStyle: {
         color: '#00aa00'
       }
     }, {
       type: 'custom',
       name: 'error',
       itemStyle: {
         normal: {
           borderWidth: 1.5
         }
       },
       renderItem: (params, api) => renderErrorBar(0, 2, params, api),
       data: errorData,
       z: 100
     }, {
       type: 'custom',
       name: 'error',
       itemStyle: {
         normal: {
           borderWidth: 1.5
         }
       },
       renderItem: (params, api) => renderErrorBar(1, 2, params, api),
       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



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