Google 차트에서 바 오버랩 문제 - 콤보 차트

Question

Google 차트 구현에 약간의 문제가 있습니다. 요구 사항에 따라 필자는 이중 y 축을 가져야하고 y 축의 막대는 겹쳐 져야합니다. 나는 내 코드와 함께 다음과 같은 출력을 얻을 :

주의 마지막 두 줄의 두 개의 파란색 화살표를. 파란색 막대는 빨간색 막대 뒤에 작은 막대로 숨겨져 있습니다.

이

var chart, data; 

google.load('visualization', '1.0', {'packages':['corechart']}); 
google.setOnLoadCallback(drawChart); 

function drawChart() 
{ 
    // Create the data table. 
    data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addColumn('number', 'pieces'); 
    data.addColumn('number', 'ratio'); 
    data.addColumn('number', 'ratio2'); 
    data.addRows([ 
     ['Mushrooms', 300, 200, 50, 1], 
     ['Onions', 100, 244, 4, 3], 
     ['Olives', 100, 400, 56, 10] 
    ]); 

    // Set chart options 
    options = { 
     chartType:"ComboChart", 
     containerId:"visualization", 
     stackSeries: true, 
     isStacked : true, 
     seriesDefaults: { 

      rendererOptions: { 
       barPadding: 0, 
       barMargin: 10 
      }, 
      pointLabels: { 
       show: true, 
       stackedValue: true 
      } 
     }, 
     grid: { 
      background: '#272424', 
      drawGridlines: false 
     }, 
     seriesType: "bars",  
     series: { 
        0: { 
          targetAxisIndex: 0 
         }, 
         1: { 
          targetAxisIndex: 1 
         }, 
         2: { 
          targetAxisIndex: 1, 
          type: "line" 
         }, 
         3: { 
          type: "line" 
         } 

       }, 
       hAxis:{ 

       },   
       vAxes: { 
        0: {   
         title: "Slices",     
         label:'Slices',  
         type:'bars'       
        }, 
        1: { 
         title: "pieces", 
         label:'pieces', 
         type:'bars' 
        }, 
        2: { 
         title: "ratio,", 
         label:'ratio', 
         type:'line' 
        }, 
        3: { 
         title: "ratio2,", 
         label:'ratio2', 
         type:'line' 
        } 

       } 
     }; 

    // Instantiate and draw our chart, passing in some options. 
    chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    google.visualization.events.addListener(chart, 'select', selectionHandler); 
} 

function selectionHandler() { 
    var selectedData = chart.getSelection(), row, item; 
    if(selectedData != '') 
    { 
     row = selectedData[0].row; 
     item = data.getValue(row,3); 
     alert("You selected :" + item);   
    } 
} 

사람 내가 이것에 대해 어떻게 갈 수 나에게 제안 할 수 있습니다 :이 JS 파일에 대한 내 코드입니다

: 그것은 사실의 모양은? 어떤 도움을 주시면 감사하겠습니다.

Answer 1

당신은 별도의 축에 막대를 표시됩니다

   0: { 
         targetAxisIndex: 0 
        }, 
        1: { 
         targetAxisIndex: 1 
        }, 
        2: { 
         targetAxisIndex: 1, 
         type: "line" 
        }, 
        3: { 
         type: "line" 
        } 

그래서 첫 번째 막대는 두 번째 오른쪽 축에, 왼쪽 축에 있습니다. 첫 번째 막대는 앞에있는 빨간색 막대보다 높기 때문에 표시됩니다. 이는 의도적으로 설계된 동작입니다. 당신이 그 (것)들을 적재 표시하려면, 여기에 코드를 변경 :

는

0: { 
    targetAxisIndex: 0 
    }, 
    1: { 
    targetAxisIndex: 0 
    }, 
    2: { 
    targetAxisIndex: 1, 
    type: "line" 
    }, 
    3: { 
    targetAxisIndex: 1, 
    type: "line" 
    } 

이 이것으로 종료됩니다 : 당신의 두 축이 더 이상 해당하는 크기가없는

참고. 필요에 따라 다른 매개 변수를 조정하십시오. 나란히 놓고 싶다면, 같은 축에 넣고 isStacked: true을 제거하면 서로 옆에 서게됩니다.

^{참고 :이 종류의 차트는 매우 바쁘고 좋은 시각화 실습이 아닐 수 있습니다. 그럼에도 불구하고 차트를 작성해야하는 경우 위의 솔루션이 제대로 작동해야합니다. 실제로 작은 막대를 앞에두고 싶다면 SVG 편집에 행운을 빈다.}

Answer 2

실제로 원하는 방식으로 데이터보기를 사용하여 파란색 데이터 계열을 두 개로 나눌 수 있습니다. 데이터가 빨간색 계열보다 크고 하나가 적색 계열보다 작거나 같은 계열 하나를 만들고 빨간색, 미만보다 큰 위치에 순서대로 배치하십시오. 계열 옵션에서이 새 계열을 첫 번째와 같은 색으로 설정하고이를 인덱스에서 숨 깁니다. 여기

당신이 사용하는 것과 DataView를이다 :

var view = new google.visualization.DataView(data); 
view.setColumns([0, { 
    type: 'number', 
    label: data.getColumnLabel(1), 
    calc: function (dt, row) { 
     var val = dt.getValue(row, 1); 
     return (val > dt.getValue(row, 2)) ? val : null; 
    } 
}, 2, { 
    type: 'number', 
    label: data.getColumnLabel(1), 
    calc: function (dt, row) { 
     var val = dt.getValue(row, 1); 
     return (val <= dt.getValue(row, 2)) ? val : null; 
    } 
}, 3, 4]); 

을 여기에 일련의 옵션들 :

chart.draw(view, options); 

참조 :

series: { 
    0: { 
     targetAxisIndex: 0 
    }, 
    1: { 
     targetAxisIndex: 1 
    }, 
    2: { 
     targetAxisIndex: 0, 
     visibleInLegend: false, 
     color: '#3366cc' // matches series 0 
    }, 
    3: { 
     targetAxisIndex: 1, 
     type: "line" 
    }, 
    4: { 
     type: "line" 
    } 
} 

대신 DataTable을의 볼 수있는 차트를 그립니다 작동하는 곳 : http://jsfiddle.net/asgallant/4jhC5/