Bar chart in [removed] stacked bars + grouped bars

后端 未结 4 684
难免孤独
难免孤独 2021-01-05 03:27

I\'m looking for a Javascript solution to mix Grouped and Stacked Bars with a beautiful graph, such as those provided by Protovis.

For example if I want to compare d

相关标签:
4条回答
  • Since no one's mentioned C3.js yet, here it is, with a stacked+grouped demo (source)

    var chart = c3.generate({
        bindto: "#chart",
        data: {
            columns: [
                ['data1', -30, 200, 200, 400, -150, 250],
                ['data2', 130, 100, -100, 200, -150, 50],
                ['data3', -230, 200, 200, -300, 250, 250]
            ],
            type: 'bar',
            groups: [
                ['data1', 'data2']
            ]
        },
        grid: {
            y: {
                lines: [{value:0}]
            }
        }
    });
    
    setTimeout(function () {
        chart.groups([['data1', 'data2', 'data3']])
    }, 1000);
    
    setTimeout(function () {
        chart.load({
            columns: [['data4', 100, -50, 150, 200, -300, -100]]
        });
    }, 2000);
    
    setTimeout(function () {
        chart.groups([['data1', 'data2', 'data3', 'data4']])
    }, 3000);
    /*-- Chart --*/
    /*-- From https://github.com/masayuki0812/c3/blob/0.4.10/c3.css --*/
    /*-- Chart --*/
    .c3 svg {
      font: 10px sans-serif; }
    
    .c3 path, .c3 line {
      fill: none;
      stroke: #000; }
    
    .c3 text {
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none; }
    
    .c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
      shape-rendering: crispEdges; }
    
    .c3-chart-arc path {
      stroke: #fff; }
    
    .c3-chart-arc text {
      fill: #fff;
      font-size: 13px; }
    
    /*-- Axis --*/
    /*-- Grid --*/
    .c3-grid line {
      stroke: #aaa; }
    
    .c3-grid text {
      fill: #aaa; }
    
    .c3-xgrid, .c3-ygrid {
      stroke-dasharray: 3 3; }
    
    /*-- Text on Chart --*/
    .c3-text.c3-empty {
      fill: #808080;
      font-size: 2em; }
    
    /*-- Line --*/
    .c3-line {
      stroke-width: 1px; }
    
    /*-- Point --*/
    .c3-circle._expanded_ {
      stroke-width: 1px;
      stroke: white; }
    
    .c3-selected-circle {
      fill: white;
      stroke-width: 2px; }
    
    /*-- Bar --*/
    .c3-bar {
      stroke-width: 0; }
    
    .c3-bar._expanded_ {
      fill-opacity: 0.75; }
    
    /*-- Focus --*/
    .c3-target.c3-focused {
      opacity: 1; }
    
    .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
      stroke-width: 2px; }
    
    .c3-target.c3-defocused {
      opacity: 0.3 !important; }
    
    /*-- Region --*/
    .c3-region {
      fill: steelblue;
      fill-opacity: 0.1; }
    
    /*-- Brush --*/
    .c3-brush .extent {
      fill-opacity: 0.1; }
    
    /*-- Select - Drag --*/
    /*-- Legend --*/
    .c3-legend-item {
      font-size: 12px; }
    
    .c3-legend-item-hidden {
      opacity: 0.15; }
    
    .c3-legend-background {
      opacity: 0.75;
      fill: white;
      stroke: lightgray;
      stroke-width: 1; }
    
    /*-- Tooltip --*/
    .c3-tooltip-container {
      z-index: 10; }
    
    .c3-tooltip {
      border-collapse: collapse;
      border-spacing: 0;
      background-color: #fff;
      empty-cells: show;
      -webkit-box-shadow: 7px 7px 12px -9px #777777;
      -moz-box-shadow: 7px 7px 12px -9px #777777;
      box-shadow: 7px 7px 12px -9px #777777;
      opacity: 0.9; }
    
    .c3-tooltip tr {
      border: 1px solid #CCC; }
    
    .c3-tooltip th {
      background-color: #aaa;
      font-size: 14px;
      padding: 2px 5px;
      text-align: left;
      color: #FFF; }
    
    .c3-tooltip td {
      font-size: 13px;
      padding: 3px 6px;
      background-color: #fff;
      border-left: 1px dotted #999; }
    
    .c3-tooltip td > span {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 6px; }
    
    .c3-tooltip td.value {
      text-align: right; }
    
    /*-- Area --*/
    .c3-area {
      stroke-width: 0;
      opacity: 0.2; }
    
    /*-- Arc --*/
    .c3-chart-arcs-title {
      dominant-baseline: middle;
      font-size: 1.3em; }
    
    .c3-chart-arcs .c3-chart-arcs-background {
      fill: #e0e0e0;
      stroke: none; }
    
    .c3-chart-arcs .c3-chart-arcs-gauge-unit {
      fill: #000;
      font-size: 16px; }
    
    .c3-chart-arcs .c3-chart-arcs-gauge-max {
      fill: #777; }
    
    .c3-chart-arcs .c3-chart-arcs-gauge-min {
      fill: #777; }
    
    .c3-chart-arc .c3-gauge-value {
      fill: #000;
      /*  font-size: 28px !important;*/ }
    <!-- link href="https://raw.githubusercontent.com/masayuki0812/c3/0.4.10/c3.min.css" rel="stylesheet"/-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://raw.githubusercontent.com/masayuki0812/c3/0.4.10/c3.min.js"></script>
    
    <div id="chart"></div>

    0 讨论(0)
  • 2021-01-05 04:08

    See also the Dojo toolkit's Dojox Charting API: Dojox charting

    0 讨论(0)
  • 2021-01-05 04:26

    Hey I just developed grouped+stacked bar chart on d3.js.

    • Source

    • Demo

    0 讨论(0)
  • 2021-01-05 04:31

    Checkout Google Chart Tools and Google Visualization

    for instance you can specify the following:

    enter image description here

    cht=bvs
    chco=4D89F9,C6D9FD
    chd=t:10,50,60,80,40|
      50,60,100,40,20
    chds=0,160
    

    let's say if you change the chd to

    enter image description here

    cht=bvs
    chs=250x150
    chco=4D89F9,C6D9FD
    chd=t:0,50,0,80,0, 10, 50, 40
          60,0,100,0,20, 50, 100, 60
    chds=0,160
    

    Take a look at the chart above (as if its a group chart, but actually its stacked). Then you can append data after to create stacked 'looking' group as the graph is intended.

    0 讨论(0)
提交回复
热议问题