如何在单个图表中添加条形图和折线图

Question

您好我想在一个图表中获得条形图和线图我能够显示条形图（多个垂直条），需要显示折线图

registerDispatcherServlet()

我试图达到如下图表

Answer 1

如果为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对象，用于定义要为每个系列使用的渲染器。前三个使用BarRenderer，后两个使用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的查询更新：

在现有y轴旁边定义y2轴。确保showGridline设置为false，因此它使用与yaxis相同的网格：

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

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

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

请参阅here了解演示。