向Google圖表添加一條新線條而不會改變其他圖標

我無法使用谷歌圖表堆疊圖形來顯示「動態」圖形，我的意思是說，每次繪製圖形時，都會添加一行新的數據。向Google圖表添加一條新線條而不會改變其他圖標

問題是，當我添加新行時，整個圖形比例會發生變化。

鏈接到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鏈接並單擊幾次繪製圖表按鈕，每次單擊它時都會將新行添加到圖表中。所以試着點擊幾下，你會發現一段時間後事情會變得混亂。

理想情況下，我試圖實現的是，在第二，第三（依此類推）點擊後，我不會注意到我們加載的整個圖形，我只會注意到添加了一個新行。

我真的很感謝在這個問題上的幫助。

來源

2015-10-13 LiranBo

我能夠解決它。在玩了一段時間之後，我找到了克服大部分錯誤的方法。

主要問題是高度和寬度不斷變化，經過幾次運行後，圖形開始失去其結構。

我所做的變化包括：

設置一個固定的寬度。
設置最小高度並對尺寸值進行一些調整。
設置固定的字體大小 - 這就是圖形失去其形狀的原因。

我已經在下面包含了更新的代碼。（看起來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>

來源

2015-10-14 15:28:29 LiranBo

向Google圖表添加一條新線條而不會改變其他圖標

回答

相關問題