Question

我正在尝试显示Google Charts Gauge控件。我有一个非常简单的网页，如下所示：

<!--Load the Google Charts AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div" style="width: 400px; height: 120px;"></div>

@section Scripts {
    <script src="~/Scripts/Brewery/fermenterVisualization.js"></script>
}

我的Javascript文件如下所示：

// Load the Visualization API and the chart package.
google.charts.load('current', { 'packages': ['gauge'] });

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart2);

function drawChart2() {
    var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Fermenter 1', '80'],
        ['Fermenter 2', '55'],
        ['Fermenter 3', '68'],
        ['Fermenter 4', '78'],
        ['Fermenter 5', '58'],
        ['Fermenter 6', '48'],
        ['Fermenter 7', '38']
    ]);

    var options = {
        width: 400, height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom: 75, yellowTo: 90,
        minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

    chart.draw(data, options);
}

页面加载成功，JS代码执行时没有错误。但是，我没有在页面上显示任何内容。

Answer 1

第二个数据表列中的值必须是数字（80），而不是字符串（'80'）

请参阅以下工作代码段...

google.charts.load('current', { 'packages': ['gauge'] });
google.charts.setOnLoadCallback(drawChart2);

function drawChart2() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Fermenter 1', 80],
    ['Fermenter 2', 55],
    ['Fermenter 3', 68],
    ['Fermenter 4', 78],
    ['Fermenter 5', 58],
    ['Fermenter 6', 48],
    ['Fermenter 7', 38]
  ]);

  var options = {
    width: 400, height: 120,
    redFrom: 90, redTo: 100,
    yellowFrom: 75, yellowTo: 90,
    minorTicks: 5
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

  chart.draw(data, options);
}

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

仪表控制不显示任何东西

1 个答案: