如何強制 Google Chart Legend 顯示 Row 值？

Question

我希望這個問題可以被理解，因為我發現這個話題很難解釋。 我正在尋找的是Google (Column) Chart的解決方案，其中圖表同時顯示 X 軸和帶有值的圖例，就像餅圖有時那樣。 不過，我發現的大多數示例只是關閉了圖例。

這是我到目前為止所得到的：擬合 x 軸的第一個示例：

圖例只顯示“密度”，這是有道理的，但我也在尋找圖例中的所有金屬。 所以我改變了數據集的順序，最后得到了這個：

此處 x 軸顯示密度而不是金屬。 所以我正在尋找的是這樣的：

無論哪種方式，無論是圖例的操縱還是軸的操縱都對我有用。 任何想法如何繼續？

來源

第一版

function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},

      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }

我的小提琴： https : //jsfiddle.net/927pjLvb/2/

第二個版本：

function drawChart() {
      var data = google.visualization.arrayToDataTable([
       ["Element", "Copper", "Silver", "Gold", "Platinum"],
       ["Density", 8.94, 10.49, 19.30, 21.45],

      ]);

      var view = new google.visualization.DataView(data);
      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" },                 
      4,
                                    { calc: "stringify",
                         sourceColumn: 4,
                         type: "string",
                         role: "annotation" }
      ]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
        bar: {groupWidth: "95%"},

      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }

我的小提琴： https : //jsfiddle.net/8jaL9kf3/

Answer 1

從第二個版本開始，將 x 軸標簽留空。

var data = google.visualization.arrayToDataTable([
  ['Element', 'Copper', 'Silver', 'Gold', 'Platinum'],
  ['', 8.94, 10.49, 19.30, 21.45]
]);

在圖表的'ready'事件中，
從圖例中復制標簽，
並將它們放在欄桿下，
使用圖表方法 --> getChartLayoutInterface()

布局界面有方法 --> getBoundingBox(id)
此方法返回圖表元素的坐標，
通過傳遞元素的 id。
在這種情況下，我們想知道條形的坐標。
每個條形的 id 結構如下。

'bar#0#0'  // <-- first bar

其中第一個0是序列號，第二個是行號。
一旦我們知道條形的坐標，
我們可以將復制的標簽放在它們下面。

請參閱以下工作片段...

 google.charts.load('current', { packages:['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Element', 'Copper', 'Silver', 'Gold', 'Platinum'], ['', 8.94, 10.49, 19.30, 21.45] ]); var view = new google.visualization.DataView(data); 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' }, 4, { calc: 'stringify', sourceColumn: 4, type: 'string', role: 'annotation' }]); var options = { title: 'Density of Precious Metals, in g/cm^3', width: 600, height: 400, colors: ['#b87333', 'silver', 'gold', '#e5e4e2'], bar: {groupWidth: '95%'}, }; var container = document.getElementById('columnchart_values'); var chart = new google.visualization.ColumnChart(container); google.visualization.events.addListener(chart, 'ready', function (gglClick) { // chart svg var svg = container.getElementsByTagName('svg')[0]; // chart layout var chartLayout = chart.getChartLayoutInterface(); // get all chart labels, chart title will be first, legend labels next var labels = container.getElementsByTagName('text'); // process each series in the data table for (var series = 1; series < data.getNumberOfColumns(); series++) { // get bar bounds var barBounds = chartLayout.getBoundingBox('bar#' + (series - 1) + '#0'); // copy legend label var barLabel = labels[series].cloneNode(true); // padding above label var labelPadding = 4; // center align label barLabel.setAttribute('text-anchor', 'middle'); // set label x,y coordinates barLabel.setAttribute('x', barBounds.left + (barBounds.width / 2)); barLabel.setAttribute('y', barBounds.top + barBounds.height + parseFloat(barLabel.getAttribute('font-size')) + labelPadding); // add label to chart svg svg.appendChild(barLabel); } }); chart.draw(view, options); });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="columnchart_values"></div>

注意：上面的例子假設圖表將有一個標題選項。