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

Question

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

 $("#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
                                }
                            },
                        });

我试图达到如下图所示

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 对象来定义您要为每个系列使用的渲染器。这里前 3 个使用 BarRenderer and the last 2 use the 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 以获得演示。

编辑： 更新有关 y2 轴的查询：

在现有的 ya 轴旁边定义一个 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。

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

how to add both barchart and line graph in single chart

jquery

jqplot