0

我正在实现基于 DataTable 的 Google（折线）图表，因此我可以“动态”更改图表的类型。我已经根据https://developers.google.com/chart/interactive/docs/reference#dataparam成功生成了数据表（由脚本生成）

并在 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>

但是我不知道为什么 X 轴没有出现。我查看了 DataTable 角色，但找不到显示 X 轴的参考 https://developers.google.com/chart/interactive/docs/roles?hl=ja#jsonliteral LineChart 文档也没有说明哪些附加必须提供参数。

jsfiddle.net/WuLWF/ （当根据 Fiddle 标准将其分解时，它不起作用）

或者我的 DataTable 生成错误。

请指导我正确的方向，非常感谢

4

1 回答 1

0

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

我敢打赌你这样做是为了让工具提示不会显示这些相同的值。您可能想要调查自定义工具提示以在工具提示中显示您想要的任何内容。

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

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

于 2013-06-30T21:43:13.093 回答