Question

我无法使用谷歌图表堆叠图表来显示动态＆＃39;图表，动态我的意思是每次绘制图表时，我都会添加一行新数据。

问题在于，当我添加新行时，整个图形比例会发生变化。

链接到JSFiddle。

HTML：

<div id="chartdiv"></div>
<button onclick='DrawChart();'>Draw Chart</button>

CSS：

#chartdiv{
    height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: solid;
}

JS：

google.load("visualization", "1", { packages: ["corechart"] });
// create legend
var legend = ['School', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
// create table
var dataTable = [legend];
// create line
var line = ['line', 0.05, 0.10, 0.25, 0.33, 0 , 0.12, 0.15];

function DrawChart() {
    dataTable.push(line);



    var data = google.visualization.arrayToDataTable(dataTable);
    var view = new google.visualization.DataView(data);

    var options_fullStacked = {
        isStacked: 'percent',
        legend: { position: 'top', maxLines: 3 },
        height: data.getNumberOfRows() * 110,
        width: 615,
        bar: {  groupWidth: 50  },
        hAxis: {
            minValue: 0,
            ticks: [0, .25, .5, .75, 1]
        },

    };
    var chart = new google.visualization.BarChart(document.getElementById("chartdiv"));
    chart.draw(view, options_fullStacked);
}

我看到了一个类似的问题here，我试图从中学习并做出相应的更改，但它没有帮助。

了解我需要帮助的最佳方法是输入JSFiddle链接并单击绘制图表按钮几次，每次单击它时，新行将添加到图表中。因此，只需尝试点击几次，您就会发现一段时间后事情开始变得混乱。

理想情况下，我想要实现的是，在第二次，第三次（依此类推）之后，我不会注意到我们加载的整个图表，我只会注意到添加了一个新行

我真的很感激这个问题的帮助。

Answer 1

我能够解决它。在使用图表一段时间后，我找到了克服大部分错误的方法。

主要问题是高度和宽度的变化，经过几次运行后，图表开始失去结构。

我所做的更改包括：

设定固定宽度。
设置最小高度并对尺寸值进行一些调整。
设置固定的字体大小 - 这就是图形失去形状的原因。

我在下面添加了更新的代码。（在JSFiddle）中看起来好多了

google.load("visualization", "1", {
  packages: ["corechart"]
});
// create legend
var legend = ['School', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
// create table
var dataTable = [legend];
// create line
var lines = [
  ['line', 0.05, 0.10, 0.25, 0.33, 0, 0.12, 0.15],
  ['line', 0.1, 0.3, 0.25, 0, 0, 0.12, 0.23]
];
var i = 0;

function DrawChart() {
  dataTable.push(lines[(i++) % 2]);



  var data = google.visualization.arrayToDataTable(dataTable);
  var view = new google.visualization.DataView(data);

  var height = Math.max(180, data.getNumberOfRows() * 85);

  var options_fullStacked = {
    isStacked: 'percent',
    legend: {
      position: 'top',
      maxLines: 3
    },
    height: height,
    width: 720,
    bar: {
      groupWidth: 50
    },
    hAxis: {
      minValue: 0,
      ticks: [0, .25, .5, .75, 1],
      title: "p"
    },
    chartArea: {
      left: 100,
      top: 30,
      width: 600
    },
    fontSize: 14
  };
  var chart = new google.visualization.BarChart(document.getElementById("chartdiv"));
  chart.draw(view, options_fullStacked);
}

#chartdiv {
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: solid;
}

<script src="https://www.google.com/jsapi"></script>
<div id="chartdiv"></div>
<button onclick='DrawChart();'>Draw Chart</button>

向Google图表添加新行，而不会移动其他行

1 个答案: