Question

我正在实施基于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生成错误。

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

Answer 1

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

我打赌你这样做了，因此工具提示不会显示这些相同的值。您可能希望研究自定义工具提示，以在工具提示中显示您想要的任何内容。

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

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

带有Javascript文字数据表的Google Line Chart未显示X轴

1 个答案: