使用jQplot实现图 [英] Implement graph using jQplot

问题描述

我需要实现以下图形

我了解堆叠图表，但是这里有轴点标签(在我的需要中没有任何轴点标签)，这是从Y轴开始的.

I know about stacked chart, but here there are axis points labels (In my need there is no any axes point labels), and this is from Y-axis.

我很困惑如何实现它.

I am confused how can I implement it.

你能帮我吗?任何链接也将有所帮助.

Can you please help me? Any link will also be helpful.

更新:

我正在尝试代码段

<script type="text/javascript" language="javascript">

  $(document).ready(function(){
      var line1 = [14];
      var line2 = [77];
      var plot4 = $.jqplot('test2', [line1, line2], {
          title: '1 Mobility Test Graph',
          animate: !$.jqplot.use_excanvas,
          stackSeries: true, 
          seriesDefaults: {
              renderer: $.jqplot.BarRenderer,
              rendererOptions:{barPadding : 0, barMargin : 5, barDirection: 'horizontal'}, 
              pointLabels:{location : 'e', edgeTolerance : 0, hideZeros: true, show : true},
              shadowAngle : 135,
              lineWidth : 0,
              showLine: true
          },
          axesDefaults : {
                show : false,
                tickOptions : {
                    show : false
                }
            },
          axes: {
              yaxis:{renderer:$.jqplot.CategoryAxisRenderer}
          },
          grid:{
                borderWidth:0, 
                shadow:false
            },
          legend: {
                renderer: $.jqplot.EnhancedLegendRenderer,
                show:true,
                rendererOptions:{
                    numberRows:1,
                    numberColumns: 3,
                    disableIEFading: false
                },
                location: 'n',
                placement : 'outsideGrid',
                marginTop: '5px',
                showSwatch:false
          }
      });
      $(".jqplot-xaxis-tick").hide();
      $(".jqplot-yaxis-tick").hide();
    });
</script>

但这不会给我任何输出.当我删除barDirection: 'horizontal'时，它的工作正常.请帮助我，怎么了...

But this doesn't give me any output. When I remove barDirection: 'horizontal' its working fine. Please help me, what is wrong...

在这里，我得到了 jsfiddle ，但是它适用于两个图形.....我该怎么做.

Here I got jsfiddle , but it works for two graphs..... how can I make for one.

推荐答案

您在追寻此?您在那里有一个堆叠的单杠. 根据文档中的示例(带有水平条形图)，您必须提供绘制一个序列数组，其中每个值都有两个值数组([x，y])，其中x是value，y是序列ID.

Are you after something like this? You have a single stacked horizontal bar there. As per examples in doc with horizontal bar chart you must give the chart an array of series where each one has values as two values arrays ([x,y]) where x is value and y is series id.

或者另一种选择是给图表一个单值数组，如此处所示.

Or another option would be to give the chart a single array of single value arrays, as shown here.

这篇关于使用jQplot实现图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！