无法在条形图中设置列的宽度[重复]答案

【问题标题】：Can't set width of column in bar chart [duplicate]无法在条形图中设置列的宽度[重复]
【发布时间】：2018-08-05 12:23:31
【问题描述】：

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

在美国境内移动
在新泽西州收到
移交给国际
斯里兰卡港口的库里尔

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

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);

【问题讨论】：

@kabanus 我已经上传了一张图片。
@kabanus 是的，现在看起来不错

标签： javascript google-visualization bar-chart

【解决方案1】：

使用chartArea的left和width调整如下如何？

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);
}

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

参考：

Configuration Options

如果这不是你想要的，我很抱歉。

【讨论】：