谷歌图表行号至少有5位小数

Question

这是我的谷歌折线图：enter image description here 如何查看至少有5位小数的数字？ 我需要一个详细的折线图。

我也想知道如何创建更多的空白空间，因为我的网站的背景不能是白色的。所以现在它看起来像不切实际的切割。

而且我的代码：

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

function drawChart() { 

    var data1 = new google.visualization.DataTable(); 
    data1.addColumn('number', 'id '); 
    data1.addColumn('number', 'C1 '); 
    data1.addRows([ 
    {% for id, qir in data1 %} 
     [{{ id }}, {{ qir }}], 
     {% endfor%} 
]); 

var data2 = new google.visualization.DataTable(); 
    data2.addColumn('number', 'id '); 
    data2.addColumn('number', 'C2 '); 
    data2.addRows([ 
{% for id, qir in data2 %} 
     [{{ id }}, {{ qir }}], 
     {% endfor%} 
]); 

var data3 = new google.visualization.DataTable(); 
    data3.addColumn('number', 'id '); 
    data3.addColumn('number', 'C3 '); 
    data3.addRows([ 
{% for id, qir in data3 %} 
     [{{ id }}, {{ qir }}], 
     {% endfor%} 
]); 

    var options1 = { 
    width: 900, 
    height : 400, 
    axes: { 
     x: { 
      0: {side: 'down'} 
     } 
    } 
    }; 

     var options2 = { 
    width: 600, 
    height : 200, 
    axes: { 
     x: { 
      0: {side: 'down'} 
     } 
    } 
    }; 
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]); 
var joinedData2 = google.visualization.data.join(joinedData, data3, 'full', [[0, 0]], [1,2], [1]); 
    var chart1 = new google.charts.Line(document.getElementById('wykres1')); 

chart1.draw(joinedData2, options1); 

} 

---

@app.route('/so') 
def so(): 
    Data1 = [(1,0.244543243223),(2,0.343454312334),(3,0.6543223411),(4,0.34231342342314),(5,0.454343343223),(6,0.5434221),(7,0.54324324314),(8,0.45324517),(9,0.543222321),(10,0.54325445519)] 
    Data2 = [(1,0.43654362),(2,0.46547543),(3,0.65475431),(4,0.65765454434),(5,0.6765443),(6,0.4654436),(7,0.3534657),(8,0.524343434),(9,0.453455532),(10,0.54354354358)] 
    Data3 = [(1,0.5345524),(2,0.6543453432),(3,0.53453465645614),(4,0.63245524),(5,0.543543536533), (6,0.53454355334),(7,0.242354531),(8,0.3424543523),(9,0.5436536544),(10,0.5425345332)] 
    return render_template('so.html', data1=Data1, data2=Data2, data3=Data3) 

Answer 1

使用NumberFormat得到5位小数。

至于空格，你可以在核心图上调整ChartArea尺寸。
但是，它似乎并不适用于材料图。
即使google.charts.Line.convertOptions ...

在这里，我同时提供并设置背景颜色来突出差异...

google.charts.load('44', { 
 
    callback: drawChart, 
 
    packages: ['line', 'corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data1 = google.visualization.arrayToDataTable(
 
    [['id', 'C1'],[1,0.244543243223],[2,0.343454312334],[3,0.6543223411],[4,0.34231342342314],[5,0.454343343223],[6,0.5434221],[7,0.54324324314],[8,0.45324517],[9,0.543222321],[10,0.54325445519]] 
 
); 
 

 
    var data2 = google.visualization.arrayToDataTable(
 
    [['id', 'C2'],[1,0.43654362],[2,0.46547543],[3,0.65475431],[4,0.65765454434],[5,0.6765443],[6,0.4654436],[7,0.3534657],[8,0.524343434],[9,0.453455532],[10,0.54354354358]] 
 
); 
 

 
    var data3 = google.visualization.arrayToDataTable(
 
    [['id', 'C3'],[1,0.5345524],[2,0.6543453432],[3,0.53453465645614],[4,0.63245524],[5,0.543543536533], [6,0.53454355334],[7,0.242354531],[8,0.3424543523],[9,0.5436536544],[10,0.5425345332]] 
 
); 
 

 
    // format numbers in second column to 5 decimals 
 
    var formatter = new google.visualization.NumberFormat({ 
 
    pattern: '#,##0.00000' 
 
    }); 
 
    formatter.format(data1, 1); 
 
    formatter.format(data2, 1); 
 
    formatter.format(data3, 1); 
 

 
    var options1 = { 
 
    backgroundColor: 'yellow', 
 
    width: 900, 
 
    height: 600, 
 
    chartArea: { 
 
     backgroundColor: 'cyan', 
 
     height: 400, 
 
     left: 100, 
 
     top: 100, 
 
     width: 640 
 
    }, 
 
    axes: { 
 
     x: { 
 
     0: {side: 'down'} 
 
     } 
 
    }, 
 
    vAxis: {format: '#,##0.00000'} 
 
    }; 
 

 
    var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]); 
 
    var joinedData2 = google.visualization.data.join(joinedData, data3, 'full', [[0, 0]], [1,2], [1]); 
 

 
    var chart1 = new google.charts.Line(document.getElementById('wykres1')); 
 
    // convert options for 'Material' chart 
 
    chart1.draw(joinedData2, google.charts.Line.convertOptions(options1)); 
 

 
    var chart2 = new google.visualization.LineChart(document.getElementById('wykres2')); 
 
    chart2.draw(joinedData2, options1); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<label>Material Chart</label> 
 
<div id="wykres1"></div> 
 
<label>Core Chart</label> 
 
<div id="wykres2"></div>