自定義Google圖表以在圖表中顯示文本/數字

Question

我正在使用Google API生成圖形。

我當前的輸出是：

我想在欄中顯示文本/數字，如下所示。.我找不到/缺少執行此操作的選項。 請讓我知道...請不要說不可能，因為它是3rd party API。 因為他們已經為其他條形圖做到了這一點…… 這里鏈接

這是我的代碼。

    //Bar Chart
      var data_bar = google.visualization.arrayToDataTable([
    ['Unit Tested','Passed', 'Failed', 'NA' ],
    ['BTEQ', 100, 20, 3, ]

  ]);

  var options_bar = {
    width: 400,
    height: 75,
    legend: { position: 'top', maxLines: 3 },
    bar: { groupWidth: '75%' },
    isStacked: true,
    series: [{color: '#32B232',visibleInLegend: false}, {color: 'red',visibleInLegend: false}, {color: '#FFD732',visibleInLegend: false}]   
  };


    var chart_bar = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart_bar.draw(data_bar, options_bar);
    //end of bar chart..

Answer 1

您實際上已經提到了該解決方案的鏈接： https : //developers.google.com/chart/interactive/docs/gallery/barchart#Labels

基本上，您需要添加與上面的鏈接中提到的DataView()類似的以下代碼，但是現在需要添加數據的每一列。

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

view.setColumns([0, 1,
                    {   calc: "stringify",
                        sourceColumn: 1,
                        type: "string",
                        role: "annotation"  },
                    2,
                    {   calc: "stringify",
                        sourceColumn: 2,
                        type: "string",
                        role: "annotation"  },
                    3,
                    {   calc: "stringify",
                        sourceColumn: 3,
                        type: "string",
                        role: "annotation"  }
                ]);

編輯：回答您的問題：0、1、2、3是指數據列。 為了使注釋出現在列中（ sourceColumn: 1 ），數據通過JSON函數stringify() （ calc: "stringify" ）轉換為字符串。 注意，使用setColumns()可以多次使用數據。 [0,1,1,1,2,3]表示在DataView（）中將100使用3次。 在這里，每列都會使用一次來查看條形，第二次將其轉換為字符串並用作注釋。

您自己的解決方案，盡管較短的代碼更像是hack。 由於您輸入了兩次數據。 當您從外部源導入數據時，這將成為一個問題。

Answer 2

這是我的工作答案...

  var data_bar = google.visualization.arrayToDataTable([
    ['Unit Tested','Passed',{ role: 'annotation' }, 'Failed',{ role: 'annotation' }, 'NA',{ role: 'annotation' } ],
    ['BTEQ', 100,'100', 20,'20', 3,'3' ]