【问题标题】:Google chart api Line chart: Units don't match pointsGoogle chart api折线图:单位不匹配点
【发布时间】:2012-07-24 14:27:47
【问题描述】:

我有一个谷歌图表 api 折线图,其中水平轴单位与图表上的对应点不匹配。看图。

我使用了那些确保 h 轴不使用十进制数字的选项:

hAxis: { title: 'some title', format: '#' }

我没有使用其他相关选项,也没有在文档中找到任何似乎可以解决问题的选项..

更新: 生成图表的代码:

var options = { title: '<%# Strings.GameStatisticsView_GameProgressChart %>', hAxis: { title: '<%# Strings.ScoreBoard_RoundNr %>', format: '#' }, vAxis: { title: '<%# Strings.Common_Points %>' }, backgroundColor: { fill: 'transparent' }, elementId: 'GameProgressChart', column1: 'Round Nr' };
drawLineChart(response.d.Data, options);

...

drawLineChart: function (data, options) {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('number', options.column1);
    for (var j = 0; j < data.key.length; j++) {
        dataTable.addColumn('number', data.key[j]);
    }
    dataTable.addRows(data.value.length);
    for (var i = 0; i < data.value.length; i++) {
        dataTable.setValue(i, 0, data.value[i].key);
        for (var k = 0; k < data.key.length; k++) {
            dataTable.setValue(i, k+1, data.value[i].value[k]);
        }
    }

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

来自 cmets 的解决方案: x 轴上的步骤不能硬编码,但您可以硬编码有多少条网格线,请参阅link

【问题讨论】:

  • 真的没有人对此一无所知吗?

标签: google-visualization linechart


【解决方案1】:

我怀疑你是否仍然需要这个问题的答案,但如果有人遇到同样的情况..

format: '#' 将值格式强制为 1 位,因此示例中的 3 很可能在 3.3 左右,但由于应用了格式,您只能看到整数部分。

【讨论】:

  • 我实际上仍然有这个问题 - 但从那以后一直没有解决它。但我的数据集只包含 1,2,3,4,5,6,7,8 所以它不有道理..但现在我只是试图删除格式:'#'并且轴上的值更有意义..但我需要为每个数据点或其中一些数据点设置一条线 - 而不是介于两者之间..你知道吗该怎么做?
  • 我可以试试。你能粘贴你用来生成图表的代码吗?
  • 现在我已经添加了生成图表的代码,但是数据来自一个网络服务,所以它不是那么容易显示..如果没有意义,请告诉我..跨度>
  • 嗨 Morten,现在这些值如何更有意义?如果您的 x 轴上只有 1、2、3、4、5、6、7、8,那么无论您使用“#”进行格式化还是根本不进行格式化,我认为都不会产生影响。 x 轴上的步骤不能硬编码,但您可以硬编码要拥有多少条网格线,请参阅link。至于数据,如果没有实际数据很难猜测,但我看到您正在使用 dataTable.setValue(i, 0, data.value[i].key) 为 x 轴分配值,键是值吗?
  • 您是否尝试过绘制数据表而不是图表,看看那里的值是否有意义?
猜你喜欢
  • 1970-01-01
  • 2023-03-16
  • 2016-08-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多