Google图表 - ComboChart - 条形图和烛台

Question

我尝试创建ComboChart，其中有条形图和系列瀑布（烛台）图表。 我不知道如何为此创建数据输入。 烛台需要格式如下：

['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]

在我的案例中

和吧：

['name', 'value', { role: 'style' }],
['test1', 8, '#00f'], 
['test2', 10,'#000'],
['test3', 19,'#f00'],

甚至可以这样做吗？加入酒吧和烛台？

Answer 1

1. 使用series选项控制每个系列的图表类型 每个系列由数据
   中的一列或一组列表示 从第一列不是x轴或列角色开始

示例：您描述的图表的列可能类似于以下内容......

"cols":[
  // x-axis
  {"label":"Category","type":"string"},

  // bar series -- 0
  {"label":"Bar 0","type":"number"},

  // bar series -- 1
  {"label":"Bar 1","type":"number"},

  // waterfall series -- 2
  {"label":"WF 2 - Bottom 1","type":"number"},
  {"label":"WF 2 - Bottom 2","type":"number"},
  {"label":"WF 2 - Top 1","type":"number"},
  {"label":"WF 2 - Top 2","type":"number"},
  {"role":"style","type":"string","p":{"role":"style"}},

  // bar series -- 3
  {"label":"Bar 3","type":"number"}
],

烛台图表需要4列，在上面的示例中，还使用了样式列角色，
因此，所有五列都被视为系列号2的一部分

1. 在为combochart构建数据时， 使用null作为系列值，
   当它们与相同的x轴值不一致时

示例数据：

"rows":[
  // bar (series 0 & 1) data
  {"c":[{"v":"YTD"},{"v":14807893.054},{"v":11684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
  {"c":[{"v":"Last Year"},{"v":16307893.054},{"v":20684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},

  // waterfall (series 2) data
  {"c":[{"v":"Budget"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"},{"v":null}]},
  {"c":[{"v":"Contract Labor"},{"v":null},{"v":null},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"},{"v":null}]},
  {"c":[{"v":"Contract Non Labor"},{"v":null},{"v":null},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"},{"v":null}]},
  {"c":[{"v":"Matls & Equip"},{"v":null},{"v":null},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"},{"v":null}]},
  {"c":[{"v":"Other"},{"v":null},{"v":null},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"},{"v":null}]},
  {"c":[{"v":"Labor"},{"v":null},{"v":null},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"},{"v":null}]},
  {"c":[{"v":"Travel"},{"v":null},{"v":null},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"},{"v":null}]},
  {"c":[{"v":"Training"},{"v":null},{"v":null},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"},{"v":null}]},
  {"c":[{"v":"Actual"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"},{"v":null}]},

  // bar (series 3) data
  {"c":[{"v":"FCST"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":16182561.25}]}
]

1. 以下是带有条形和烛台的组合图表的工作示例
＆＃13;
＆＃13;
google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart', 'table']
});

function drawChart() {
  var dataChart = new google.visualization.DataTable({
    "cols":[
      // x-axis
      {"label":"Category","type":"string"},

      // bar series -- 0
      {"label":"Bar 0","type":"number"},

      // bar series -- 1
      {"label":"Bar 1","type":"number"},

      // waterfall series -- 2
      {"label":"WF 2 - Bottom 1","type":"number"},
      {"label":"WF 2 - Bottom 2","type":"number"},
      {"label":"WF 2 - Top 1","type":"number"},
      {"label":"WF 2 - Top 2","type":"number"},
      {"role":"style","type":"string","p":{"role":"style"}},

      // bar series -- 3
      {"label":"Bar 3","type":"number"}
    ],
    "rows":[
      // bar (series 0 & 1) data
      {"c":[{"v":"YTD"},{"v":14807893.054},{"v":11684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
      {"c":[{"v":"Last Year"},{"v":16307893.054},{"v":20684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},

      // waterfall (series 2) data
      {"c":[{"v":"Budget"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"},{"v":null}]},
      {"c":[{"v":"Contract Labor"},{"v":null},{"v":null},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"},{"v":null}]},
      {"c":[{"v":"Contract Non Labor"},{"v":null},{"v":null},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"},{"v":null}]},
      {"c":[{"v":"Matls & Equip"},{"v":null},{"v":null},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"},{"v":null}]},
      {"c":[{"v":"Other"},{"v":null},{"v":null},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"},{"v":null}]},
      {"c":[{"v":"Labor"},{"v":null},{"v":null},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"},{"v":null}]},
      {"c":[{"v":"Travel"},{"v":null},{"v":null},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"},{"v":null}]},
      {"c":[{"v":"Training"},{"v":null},{"v":null},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"},{"v":null}]},
      {"c":[{"v":"Actual"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"},{"v":null}]},

      // bar (series 3) data
      {"c":[{"v":"FCST"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":16182561.25}]}
    ]
  });

  var comboChart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    containerId: 'chart_div',
    dataTable: dataChart,
    options: {
      animation: {
        duration: 1500,
        easing: 'inAndOut',
        startup: true
      },
      backgroundColor: 'transparent',
      bar: {
        group: {
          width: '85%'
        }
      },
      chartArea: {
        backgroundColor: 'transparent',
        bottom: 42,
        height: '100%',
        left: 60,
        top: 24,
        width: '100%'
      },
      hAxis: {
        textStyle: {
          fontSize: 12
        }
      },
      height: 400,
      legend: 'none',
      seriesType: 'bars',
      series: {
        2: {
          type: 'candlesticks'
        }
      },
      tooltip: {
        isHtml: true,
        trigger: 'both'
      },
      vAxis: {
        format: 'short',
        textStyle: {
          color: '#616161'
        },
        viewWindow: {
          min: 10000000,
          max: 24000000
        }
      },
      width: '100%'
    }
  });
  comboChart.draw();
}
＆＃13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>
＆＃13;
＆＃13;
＆＃13;

note ：在整页模式下运行代码段时，您会注意到，
图表在对齐x轴标签时没有做得很好 你可以能够操纵选项以使它们更好地对齐，
但它将采取一些操纵......

1. 你可能会有更好的结果，并排创建三个独立的图表 只需要确保每个都有相同的vAxis值，
   如果需要，您可以隐藏额外的vAxis标签等。
   再次，操纵是必需的

示例：在整页模式中最佳显示代码段

＆＃13;
＆＃13;
google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart', 'table']
});

function drawChart() {
  var dataBar0 = new google.visualization.DataTable({
    "cols":[
      {"label":"Category","type":"string"},
      {"label":"Bar 0","type":"number"},
      {"label":"Bar 1","type":"number"}
    ],
    "rows":[
      // bar 0 data
      {"c":[{"v":"YTD"},{"v":22807893.054},{"v":18684139.912}]}
    ]
  });

  var barChart0 = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'bar_chart_0',
    dataTable: dataBar0,
    options: {
      animation: {
        duration: 1500,
        easing: 'inAndOut',
        startup: true
      },
      backgroundColor: 'transparent',
      bar: {
        gap: 20,
        width: 60
      },
      chartArea: {
        backgroundColor: 'transparent',
      },
      height: 400,
      legend: 'none',
      theme: 'maximized',
      tooltip: {
        isHtml: true,
        trigger: 'both'
      },
      vAxis: {
        format: 'short',
        viewWindow: {
          min: 10000000,
          max: 24000000
        }
      }
    }
  });
  barChart0.draw();

  var dataWF0 = new google.visualization.DataTable({
    "cols":[
      {"label":"Category","type":"string"},
      {"label":"WF 2 - Bottom 1","type":"number"},
      {"label":"WF 2 - Bottom 2","type":"number"},
      {"label":"WF 2 - Top 1","type":"number"},
      {"label":"WF 2 - Top 2","type":"number"},
      {"role":"style","type":"string","p":{"role":"style"}}
    ],
    "rows":[
      {"c":[{"v":"Budget"},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"}]},
      {"c":[{"v":"Other"},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"}]},
      {"c":[{"v":"Labor"},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"}]},
      {"c":[{"v":"Travel"},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"}]},
      {"c":[{"v":"Training"},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"}]},
      {"c":[{"v":"Actual"},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"}]}
    ]
  });

  var wfChart0 = new google.visualization.ChartWrapper({
    chartType: 'CandlestickChart',
    containerId: 'wf_chart_0',
    dataTable: dataWF0,
    options: {
      animation: {
        duration: 1500,
        easing: 'inAndOut',
        startup: true
      },
      backgroundColor: 'transparent',
      bar: {
        gap: 20,
        width: 60
      },
      chartArea: {
        backgroundColor: 'transparent'
      },
      height: 400,
      legend: 'none',
      theme: 'maximized',
      tooltip: {
        isHtml: true,
        trigger: 'both'
      },
      vAxis: {
        format: 'short',
        viewWindow: {
          min: 10000000,
          max: 24000000
        }
      },
      width: '100%'
    }
  });
  wfChart0.draw();

  var dataBar1 = new google.visualization.DataTable({
    "cols":[
      {"label":"Category","type":"string"},
      {"label":"Bar 0","type":"number"},
      {"label":"Bar 1","type":"number"}
    ],
    "rows":[
      // bar 0 data
      {"c":[{"v":"YTD"},{"v":20807893.054},{"v":19684139.912}]}
    ]
  });

  var barChart1 = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'bar_chart_1',
    dataTable: dataBar1,
    options: {
      animation: {
        duration: 1500,
        easing: 'inAndOut',
        startup: true
      },
      backgroundColor: 'transparent',
      bar: {
        gap: 20,
        width: 60
      },
      chartArea: {
        backgroundColor: 'transparent',
      },
      height: 400,
      legend: 'none',
      theme: 'maximized',
      tooltip: {
        isHtml: true,
        trigger: 'both'
      },
      vAxis: {
        format: 'short',
        viewWindow: {
          min: 10000000,
          max: 24000000
        }
      }
    }
  });
  barChart1.draw();
}
＆＃13;
.max-chart {
  display: inline-block;
}
＆＃13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="max-chart" id="bar_chart_0"></div>
<div class="max-chart" id="wf_chart_0"></div>
<div class="max-chart" id="bar_chart_1"></div>
＆＃13;
＆＃13;
＆＃13;