Google visualization 带有Javascript文本数据表的Google折线图现在显示X轴_Google Visualization

Google visualization 带有Javascript文本数据表的Google折线图现在显示X轴

google-visualization

Google visualization 带有Javascript文本数据表的Google折线图现在显示X轴,google-visualization,Google Visualization,我正在基于DataTable实现一个Google（line）图表，这样我就可以“动态”更改图形的类型。我已经成功地根据生成了数据表（由脚本生成）并在HTML页面中实现（出于测试目的，页面为空，因此不会干扰任何其他脚本/内容） Y轴、Legenda和直线已正确生成，但x轴似乎缺失我将以下内容用于数据表： {"cols":[{"id":"timestamp","label":"timestamp","pattern":"","type":"string"},{"id":"sy","label":

我正在基于DataTable实现一个Google（line）图表，这样我就可以“动态”更改图形的类型。我已经成功地根据生成了数据表（由脚本生成）

并在HTML页面中实现（出于测试目的，页面为空，因此不会干扰任何其他脚本/内容）

Y轴、Legenda和直线已正确生成，但x轴似乎缺失

我将以下内容用于数据表：

{"cols":[{"id":"timestamp","label":"timestamp","pattern":"","type":"string"},{"id":"sy","label":"sy","pattern":"","type":"number"},{"id":"us","label":"us","pattern":"","type":"number"},{"id":"average_cpu","label":"average_cpu","pattern":"","type":"number"}],"rows":[{"c":[{"v":"1372249356","f":""},{"v":0,"f":""},{"v":4,"f":""},{"v":43,"f":""}]},{"c":[{"v":"1372249650","f":""},{"v":13,"f":""},{"v":46,"f":""},{"v":49,"f":""}]},{"c":[{"v":"1372249950","f":""},{"v":4,"f":""},{"v":45,"f":""},{"v":47,"f":""}]},{"c":[{"v":"1372250250","f":""},{"v":2,"f":""},{"v":19,"f":""},{"v":46,"f":""}]},{"c":[{"v":"1372250550","f":""},{"v":3,"f":""},{"v":46,"f":""},{"v":51,"f":""}]}]}

这一切在下面的Javascript中汇集在一起

<html>
<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {'packages':['corechart']});
    </script>
            <script type="text/javascript">
    google.setOnLoadCallback(draw_15a6f1d2a7556b357de0d315596aa96c);
    function draw_15a6f1d2a7556b357de0d315596aa96c() {
      var data = new google.visualization.DataTable({"cols":[{"id":"timestamp","label":"timestamp","pattern":"","type":"string"},{"id":"sy","label":"sy","pattern":"","type":"number"},{"id":"us","label":"us","pattern":"","type":"number"},{"id":"average_cpu","label":"average_cpu","pattern":"","type":"number"}],"rows":[{"c":[{"v":"1372249356","f":""},{"v":0,"f":""},{"v":4,"f":""},{"v":43,"f":""}]},{"c":[{"v":"1372249650","f":""},{"v":13,"f":""},{"v":46,"f":""},{"v":49,"f":""}]},{"c":[{"v":"1372249950","f":""},{"v":4,"f":""},{"v":45,"f":""},{"v":47,"f":""}]},{"c":[{"v":"1372250250","f":""},{"v":2,"f":""},{"v":19,"f":""},{"v":46,"f":""}]},{"c":[{"v":"1372250550","f":""},{"v":3,"f":""},{"v":46,"f":""},{"v":51,"f":""}]}]});
      var chart = new google.visualization.LineChart(document.getElementById('draw_15a6f1d2a7556b357de0d315596aa96c'));
      chart.draw(data, {width: 800, height: 600});
    }
    </script>    
</head>
<body>
    <div id="draw_15a6f1d2a7556b357de0d315596aa96c"></div>
</body>
</html>


//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
google.setOnLoadCallback（图15A6F1D2A7556B357 DE0D315596AA96C）；
功能图_15A6F1D2A7556B357 DE0D315596AA96C（）{
var data=new google.visualization.DataTable（{“cols”：[{“id”：“timestamp”，“label”：“timestamp”，“pattern”：“type”：“string”}，{“id”：“sy”，“label”：“sy”，“pattern”：“type”：“number”}，{“id”：“type”：“number”}，{“id”：“average_cpu”，“pattern”：“type”：“type”：“type”：“number”}，{“number”；“v”：“rows”：“c”{“v”：“1372249356”，“label”：“f”}，{“v”目前，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，46，“f”：“}]}，{“c”：[{“v”：“1372250550”，“f”：“}，{”v:3，“f”：“}，{”v:46，“f”：“}”，{“v”：51，“f”：“}]}]；
var chart=new google.visualization.LineChart（document.getElementById（'draw_15a6f1d2a7556b357de0d315596aa96c'）；
绘制图表（数据，{宽度：800，高度：600}）；
}

但我不知道为什么X轴没有出现。我已经查看了DataTable角色，但找不到显示X轴的引用线形图文档也没有说明必须提供哪些附加参数

jsfiddle.net/WuLWF/（根据小提琴标准将其分解成碎片时，它不起作用）

或者我的数据表生成错误

请给我指引正确的方向，

非常感谢

x轴出现了，但标签没有出现。第一列是字符串类型，因此在任何情况下都看不到网格线，但对于每一行，第一列“f”属性都是空字符串，这意味着它将作为空字符串显示在轴标签中，就像它所做的那样

我打赌您这样做是为了使工具提示不会显示这些相同的值。您可能需要研究自定义工具提示，以便在工具提示中显示所需的内容

如果在第一列中使用了数字而不是字符串，则将使用“轴格式”选项生成轴标签并将其显示为数字，并且这些值可能与第一列中的值接近。离散字符串值按原样使用

或者，您可能更喜欢使用日期、日期时间或日期时间类型。这些标记也被视为连续的，如数字，而不是离散的，因此标记标签的格式由“轴格式”选项决定。希望有帮助。

是的，这就是问题所在。为了显示字符串的X轴，我需要填充f值。谢谢，这真是帮了大忙！