구글 차트 난 당신이 좀 도와 수 있기를 바랍니다 열

의 각 부분에 대해 서로 다른 주석과 열이 쌓여있다. 나는 차트를 성공적으로 만들었지 만, 각 열의 각 부분에 주석을 추가해야합니다 (적절한 이름을 알지 못합니다). 조각에 의해 표현 된 합계의 백분율을 나타냅니다.구글 차트 난 당신이 좀 도와 수 있기를 바랍니다 열

아래 예제에서는 스택 된 열을 표시하도록 주석을 설정해야하며 첫 번째 열의 값이 "60 %"이고 다른 첫 번째 열의 주석이 "양호"영역에 있어야합니다. "40 %"의 "나쁜"영역 등.

지금까지 "나쁜"영역에 대한 백분율 값을 표시하는 주석을 하나씩 포함 시켰습니다.이 값은 각 열의 맨 위로 이동합니다. 필자는 컬럼의 각 영역에 대한 주석을 적절하게 정의하는 데 도움이 필요하다.

도움을 주셔서 감사합니다.

TL : DR : 각 열의 각 부분마다 가운데 맞춤 주석이 필요합니다.

<body> 
     <div id="chart" style="width: 900px; height: 500px; border: 1px solid black;"> 
     </div> 
    </body> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Date', 'Good', 'Bad'], 
      [Date(2013, 11, 1), 3, 2], 
      [Date(2013, 11, 2), 5, 3], 
      [Date(2013, 11, 3), 9, 2], 
      [Date(2013, 11, 4), 6, 3] 
     ]); 

     var view = new google.visualization.DataView(data); 

     view.setColumns([{ 
      label: 'Date', 
      type: 'string', 
      calc: function (dt, row) { 
       var str = dt.getValue(row, 0); 
       return { v: str, f: str.toString('dd/MM/aaaa') }; 
      } 
     } 
      , { 
       label: 'Good', 
       type: 'number', 
       calc: function (dt, row) { 
        var good = dt.getValue(row, 1); 
        var bad = dt.getValue(row, 2); 
        return { v: good/(good + bad), f: good.toString() }; 
       } 
      }, { 
       label: 'Bad', 
       type: 'number', 
       calc: function (dt, row) { 
        var good = dt.getValue(row, 1); 
        var bad = dt.getValue(row, 2); 
        return { v: bad/(good + bad), f: bad.toString() }; 
       } 
      }, 
      { 
       role: 'annotation', 
       type: 'string', 
       calc: function (dt, row) { 
        var good = dt.getValue(row, 1); 
        var bad = dt.getValue(row, 2); 
        var perc = (bad/(good + bad)) * 100; 
        var ann = parseFloat(Math.round(perc).toFixed(2)) + "%"; 
        return { v: ann, f: ann.toString() }; 
       } 
      }]); 

     var options = { 
      title: 'Daily deeds', 
      isStacked: true, 
      vAxis: { format: '#.##%' } 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
     chart.draw(view, options); 
    } 
</script>

출처

2014-01-16 user2888319

당신은 당신의 "좋은"열 후 다른 주석 열을 추가해야합니다

view.setColumns([{ 
    label: 'Date', 
    type: 'string', 
    calc: function (dt, row) { 
     var str = dt.getValue(row, 0); 
     return { v: str, f: str.toString('dd/MM/aaaa') }; 
    } 
}, { 
    label: 'Good', 
    type: 'number', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     return { v: good/(good + bad), f: good.toString() }; 
    } 
}, { 
    role: 'annotation', 
    type: 'string', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     var perc = (good/(good + bad)) * 100; 
     var ann = perc.toFixed(2) + "%"; 
     return ann; 
    } 
}, { 
    label: 'Bad', 
    type: 'number', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     return { v: bad/(good + bad), f: bad.toString() }; 
    } 
}, { 
    role: 'annotation', 
    type: 'string', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     var perc = (bad/(good + bad)) * 100; 
     var ann = perc.toFixed(2) + "%"; 
     return ann; 
    } 
}]);

출처

2014-01-16 22:54:45 asgallant

내가 쉽게이었다 보라 수 없습니다. 고맙습니다. – user2888319

정말 고마워요 !!! –

구글 차트 난 당신이 좀 도와 수 있기를 바랍니다 열

답변

관련 문제