Question

我正在尝试为我的谷歌条形图显示带有分组和堆叠数据的注释。我无法显示注释，但我在数据列中添加了注释角色，如Google条形图测试中所述以下是我的Google图表脚本：

google.load("visualization", "1.1", {
  packages: ["bar"]
});
google.setOnLoadCallback(drawStuff);


function drawStuff() {
  var data = new google.visualization.arrayToDataTable([
    ["Users", "Normal", { role: 'annotation' }, "SLA", { role: 'annotation' }, "HP", { role: 'annotation' }, "SLA", { role: 'annotation' }],
    ["John D.", 3, '3', -2, '3', 1, '3', 0, '3'],
    ["Muhammad E.", 4, '3', -2, '3', 5, '3', -3, '3'],
    ["Steve B.", 5, '3', -3, '3', 1, '3', -1, '3'],
    ["Donna P.", 5, '3', -1, '3', 6, '3', -3, '3'],
    ["Altamash A.", 7, '3', -4, '3', 6, '3', -2, '3'],
    ["Uzair T.", 3, '3', -2, '3', 0, '3', 0, '3'],
    ["Mathew R.", 6, '3', -3, '3', 6, '3', 0, '3']
  ]);

  /* ----- */

  /* ---- */

/* Options Start */
  var options = {
    bars: "vertical",
    isStacked: 'true',
    width: "90%",
    height: 500,

    annotations: {
        textStyle: {
          color: 'black',
          fontSize: 11,
        },
        alwaysOutside: true
      },

    legend: {
      position: "top",
      alignment: "start"
    },

    hAxis: {
      title: '',
      textStyle: {color: '#777777', fontSize: '20', fontName: 'Overpass', bold: true},

    },

    vAxis: {
      textStyle: {color: '#fff'},
      title: '',
      gridlines: {
        color: "#eee"
      },
      viewWindow: {
        ticks: 20,
        max: 10
      }
    },
    vAxes: {
      0: {},
      1: {
        gridlines: {
          color: "transparent"
        }
      }
    },
    series: {
      0: {
         targetAxisIndex: 0,
         color: '#4285f4'
      },
      1: {
         targetAxisIndex: 0,
        color: '#93b6f3'
      },
      2: {
         targetAxisIndex: 1,
         color: '#db4437'
      },
      3: {
        targetAxisIndex: 1,
        color: '#f19a92'
      }
    },



  };
  /* Options End */
  /* Generating Graph */
  var chart = new google.charts.Bar(document.getElementById("chart_div"));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

Answer 1

材料图表不支持

column roles，包括注释

参见 - ＆gt; Tracking Issue for Material Chart Feature Parity获取不受支持的选项的完整列表

建议使用带有以下选项的核心图表

theme: 'material'

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawStuff,
  packages:['corechart']
});

function drawStuff() {
  var data = new google.visualization.arrayToDataTable([
    ["Users", "Normal", { role: 'annotation' }, "SLA", { role: 'annotation' }, "HP", { role: 'annotation' }, "SLA", { role: 'annotation' }],
    ["John D.", 3, '3', -2, '3', 1, '3', 0, '3'],
    ["Muhammad E.", 4, '3', -2, '3', 5, '3', -3, '3'],
    ["Steve B.", 5, '3', -3, '3', 1, '3', -1, '3'],
    ["Donna P.", 5, '3', -1, '3', 6, '3', -3, '3'],
    ["Altamash A.", 7, '3', -4, '3', 6, '3', -2, '3'],
    ["Uzair T.", 3, '3', -2, '3', 0, '3', 0, '3'],
    ["Mathew R.", 6, '3', -3, '3', 6, '3', 0, '3']
  ]);

  var options = {
    theme: 'material',
    isStacked: 'true',
    width: '90%',
    height: 500,
    annotations: {
      textStyle: {
        color: 'black',
        fontSize: 11,
      },
      alwaysOutside: true
    },
    legend: {
      position: 'top',
      alignment: 'start'
    },
    hAxis: {
      title: '',
      textStyle: {color: '#777777', fontSize: '20', fontName: 'Overpass', bold: true},
    },
    vAxis: {
      textStyle: {color: '#fff'},
      title: '',
      gridlines: {
        color: '#eee'
      },
      viewWindow: {
        ticks: 20,
        max: 10
      }
    },
    vAxes: {
      0: {},
      1: {
        gridlines: {
          color: 'transparent'
        }
      }
    },
    series: {
      0: {
         targetAxisIndex: 0,
         color: '#4285f4'
      },
      1: {
         targetAxisIndex: 0,
        color: '#93b6f3'
      },
      2: {
         targetAxisIndex: 1,
         color: '#db4437'
      },
      3: {
        targetAxisIndex: 1,
        color: '#f19a92'
      }
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

注意：还建议不使用 jsapi加载库，使用loader.js
根据{{3}} ...

通过jsapi加载程序保留的Google图表版本不再一致更新。请从现在开始使用新的gstatic loader.js。

这只会更改load语句，请参阅上面的代码段...

谷歌条形图分组＆amp;堆叠注释问题

1 个答案: