如何在一个图表

你好我试图实现两者的酒吧和线图形在一个图表中，我能够显示柱状图（多个竖条）同时添加条形图和折线图，需要出示线图如何在一个图表

$("#chart1").html(""); 
var xLabel = 'AREAS'; 
var yLabel = 'NUMBERS'; 
var yInterval=''; 
var yInterval=''; 
    var S1 = [20, 60, 70, 100]; 
     var S2 = [70, 50, 30, 20]; 
     var S3 = [10, 50, 30, 20]; 
     var ticks = ['NA','APAC', 'EU','LATAM']; 
     var yInterval=120; 
     var count=120; 

    $.jqplot('chart1', [S1, S2, S3], { 
          seriesColors:['#5882FA', '#DF7401', '#A4A4A4'], 
          seriesDefaults: { 
           renderer:$.jqplot.BarRenderer, 
           pointLabels: { show: true }, 
           rendererOptions: { 
             barWidth: 25, 
             barDirection: 'vertical', 
             barPadding: 0, 
             fillToZero: true, 
             shadowOffset: 0, 
             shadowDepth: 0 
            } 
          }, 
          axes: { 
           xaxis: { 
            label: xLabel, 
            renderer: $.jqplot.CategoryAxisRenderer, 
            ticks: ticks 
           }, 
           yaxis: { 
            label: yLabel 
           } 
          }, 
         });

我是想达到像下图

来源

2015-11-01 Brittas

浏览jqplot的API文档。请尝试实施它，如果您遇到任何问题，那么您可以要求具体问题。 – vinayakj

嗨@vinayakj我正面临问题，显示线图和侧面板，其中％显示，我成功地显示多个垂直条与数据 – Brittas

请参阅如果[this]（http://www.jqplot.com/examples/ barLineAnimated.php）帮助，不确定jQplot支持多个图形格式在一个 – vinayakj

如果你定义2为您2个图的其他系列：

// Series for line graphs 
var S4 = [46, 38, 48, 47]; 
var S5 = [33, 23, 38, 11];

，并确保这些形式传入除了S1，S2和S3参数：

$.jqplot('graph_stacked', [S1, S2, S3, S4, S5], {

然后添加一个series对象定义要用于每个系列的渲染器。这里的前3使用BarRenderer最后2使用LineRenderer：

series: [{ 
     label: 'Total Number of Distributors', 
     renderer: $.jqplot.BarRenderer 
    }, { 
     label: 'Number of Distributors with at Least One Registered User', 
     renderer: $.jqplot.BarRenderer 
    }, { 
     label: 'Number of Active Distributors', 
     renderer: $.jqplot.BarRenderer 
    }, { 
     label: 'CMH Coverage %', 
     renderer: $.jqplot.LineRenderer 
    }, { 
     label: 'Distributor Utilization Rate', 
     renderer: $.jqplot.LineRenderer 
    }]

然后添加其他色彩为2个新线图：

seriesColors: ['#5882FA', '#DF7401', '#A4A4A4', '#ff00ff', '#00ffff'],

请参阅here了演示。

编辑：更新有关y2axis查询：

定义y2axis除了已有的y轴。确保因此它使用相同的网格为y轴的showGridline设置为false：

y2axis:{ 
    label: y2Label, 
    min:0, 
    max:120, 
    tickOptions:{showGridline:false} 
}

然后修改每个series，使他们使用相关的y轴渲染器。在这种情况下，所有的条形图使用yaxis和折线图使用y2axis：

series: [{ 
    label: 'Total Number of Distributors', 
    renderer: $.jqplot.BarRenderer, 
    yaxis: 'yaxis' 
}, 
... 
{ 
    label: 'Distributor Utilization Rate', 
    renderer: $.jqplot.LineRenderer, 
    yaxis: 'y2axis' 
}]

的演示中看到here。

来源

2015-11-02 09:38:10

hi @Ian A，感谢很多人为你的努力和雅它符合我所需要的，只需要一个小的改变是行渲染器应该基于y2轴上的值，y2轴应该显示Y轴的值..这可能是 – Brittas

你的意思是[this]（http://jsfiddle.net/dy33ea54/18/）？让我知道如果这是正确的，我会更新我的回答与解释 –

@lan是你得到它，它是相同的 – Brittas

如何在一个图表

回答

相关问题