Question

我正在使用Google条形图。在左侧，我需要添加条形图的描述。

在美国境内移动
在New Jersy中收到
移交给国际
斯里兰卡港口的快递员

但是我无法在条形图中显示整个句子。下面我附上了条形图和代码

google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ["Element", "Density", {role: "style"}],
        ["Move within USA",parseInt(orderObj.RNJ), "color :blue"],
        ["Received in New Jersy", parseInt(orderObj.HOC), "color :yellow"],
        ["Handed over to International Currier", parseInt(orderObj.ASP), "color :red"],
        ["At Sri lanka port", parseInt(orderObj.KWH), "color: green"]
                            ]);

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

    var options = {
         title: "",
         width: 600,
         height: 300,
         bar: {groupWidth: "65%"},
         legend: {position: "none"}
    };
    var chart = new google.visualization.BarChart(document.getElementById("chart_divSea1"));
    chart.draw(view, options);

Answer 1

如何使用left的{{1}}和width进行如下调整？

chartArea

var options = {
  title: "",
  width: 600,
  height: 300,
  bar: {groupWidth: "65%"},
  legend: {position: "none"},
  chartArea: {left: 250, width: 300} // Added
};

google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var orderObj = {RNJ: 6, HOC: 26, ASP: 6, KWH: 14}; // sample values

  var data = google.visualization.arrayToDataTable([
    ["Element", "Density", {role: "style"}],
    ["Move within USA",parseInt(orderObj.RNJ), "color :blue"],
    ["Received in New Jersy", parseInt(orderObj.HOC), "color :yellow"],
    ["Handed over to International Currier", parseInt(orderObj.ASP), "color :red"],
    ["At Sri lanka port", parseInt(orderObj.KWH), "color: green"]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation"
  }, 2]);

  var options = {
    title: "",
    width: 600,
    height: 300,
    bar: {groupWidth: "65%"},
    legend: {position: "none"},
    chartArea: {left: 250, width: 300} // Added
  };

  var chart = new google.visualization.BarChart(document.getElementById("chart_divSea1"));
  chart.draw(view, options);
}

参考：

Configuration Options

如果这不是您想要的，对不起。

无法设置条形图中的列宽

1 个答案:

参考：