Question

我解析CSV文本文件并生成包含多个Google折线图by a perl script的HTML文件。

这种情况很有效，除了这些情况，当我只有一个数据值时，

enter image description here

不显示27.4的值。

我的网页代码如下，只需在浏览器中打开它，您就会看到问题：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">

        var data = {"L_B8_MAXPWRCAL_CI0":{
                    "rows":[
{"c":[{"v":"MEASUREMENT"},{"v":27.4},{"v":23},{"v":40}]}],

                    "cols":[
{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"data"},"label":"1142926087","type":"number"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","type":"number"}]}};

        function drawCharts() {
                for (var csv in data) {
                        var x = new google.visualization.DataTable(data[csv]);

                        var options = {
                                title: csv,
                                width: 800,
                                height: 600
                        };

                        var chart = new google.visualization.LineChart(document.getElementById(csv));
                        chart.draw(x, options);
                }
        }

        $(function() {
                google.setOnLoadCallback(drawCharts);
        });

</script>
</head>
<body>
<div id="L_B8_MAXPWRCAL_CI0"></div>
<hr>
</body>
</html>

有人请知道，该怎么办？

我想要点或smth。显示为27.4

Line Chart是否可以选择强制执行该操作？

或者我应该在这里使用其他类型的图表吗？我尝试过Scatter Chart，但似乎想要2个数据值。

Answer 1

您可以使用pointSize。测试行部分是否只包含1个元素，如果是，则显示一个点。在您的代码中：

var pointSize = (data[csv].rows.length==1) ? 10 : 0;
var options = {
    title: csv,
    pointSize: pointSize,
    width: 800,
    height: 600
};

结果：

enter image description here

Google LineChart不会显示单个值

1 个答案: