Question

我们在MVC项目中使用Google Charts。

我们设法实现了图表，但是我们遇到了一些问题。

每当我们将文本倾斜90度时，hAxis标签就会重复（见下文）。

我们希望文本在90度倾斜，但只有标签在hAxis上出现一次（见下文）。

我们尝试过的事情（对图表没有影响）：

设置hAxis网格线：

 hAxis: {
           slantedText: true,
           slantedTextAngle: 90,
           gridlines: {count: 7}
        },

设置hAxis次网格线：

hAxis: {
          slantedText: true,
          slantedTextAngle: 90,
          minorGridlines: { count: 5 }
       },

有没有办法可以达到hAxis标签的预期效果？

Answer 1

使用continuous axis时，
提供你自己的ticks以确保没有重复...

ticks获取与轴

相同数据类型的数组

每个刻度可以是原始值，例如日期 - ＆gt; new Date(2017, 3, 2)

或者您可以使用对象表示法，
提供值（v:）和格式化值（f:）

{v: new Date(2017, 3, 2), f: '2017'}

这些可以使用数据表方法动态构建 - ＆gt; getColumnRange
返回带有min＆amp;的对象列的max值

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      [{type: 'date'}, {type: 'number'}, {type: 'number'}],
      [new Date(2008, 2, 5), 10, 2],
      [new Date(2008, 6, 6), 25, 4],
      [new Date(2008, 10, 8), 30, 6],
      [new Date(2009, 3, 2), 50, 7],
      [new Date(2009, 8, 12), 60, 8],
      [new Date(2009, 11, 20), 62, 9],
      [new Date(2010, 2, 5), 64, 10],
      [new Date(2010, 6, 6), 70, 10],
      [new Date(2010, 10, 8), 71, 10],
      [new Date(2011, 3, 2), 100, 12],
      [new Date(2012, 8, 12), 125, 12],
      [new Date(2012, 11, 20), 160, 12],
      [new Date(2013, 10, 8), 71, 10],
      [new Date(2014, 3, 2), 100, 12],
      [new Date(2015, 8, 12), 125, 12],
      [new Date(2016, 9, 20), 160, 12],
      [new Date(2016, 10, 8), 71, 10],
      [new Date(2017, 3, 2), 100, 12],
      [new Date(2017, 5, 12), 125, 12],
      [new Date(2017, 6, 20), 160, 12]
    ]);

    var dateRange = data.getColumnRange(0);
    var oneYear = (1000 * 60 * 60 * 24 * 365.25);
    var ticksAxisH = [];
    for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneYear) {
      var tick = new Date(i);
      ticksAxisH.push({
        v: tick,
        f: tick.getFullYear().toString()
      });
    }

    var options = {
      hAxis: {
        ticks: ticksAxisH
      },
      legend: 'none'
    };

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart"></div>

编辑

ticks选项仅由连续轴（日期，数字等）支持并且不适用于离散轴（字符串）

使用数据视图将第一列转换为数字...

// convert first column to number
var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function (dt, row) {
    return parseInt(dt.getValue(row, 0));
  },
  label: data.getColumnLabel(0),
  type: 'number'
}, 1, 2]);

然后使用数据表/视图方法 - ＆gt; getDistinctValues(colIndex)
这将返回列中不同值的数组，
可用于ticks

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"type": "string" ,"id": "Data" ,"label": "Label" },
        {"type": "number" ,"id": "Performance" ,"label": "Performance" },
        {"type": "number" ,"id": "Index" ,"label": "Index" }
      ],
      "rows": [
        {"c" : [{"v": "2008"}, {"v": 0}, {"v": "0"}]},
        {"c" : [{"v": "2008"}, {"v": 0.07103609}, {"v": "0.0052939"}]},
        {"c" : [{"v": "2008"}, {"v": 0.12668605420031}, {"v": "0.0152939"}]},
        {"c" : [{"v": "2009"}, {"v": 0.27103609}, {"v": "0.0252939"}]},
        {"c" : [{"v": "2009"}, {"v": 0.32668605420031}, {"v": "0.0352939"}]},
        {"c" : [{"v": "2010"}, {"v": 0.37103609}, {"v": "0.0452939"}]},
        {"c" : [{"v": "2010"}, {"v": 0.42668605420031}, {"v": "0.0552939"}]},
        {"c" : [{"v": "2011"}, {"v": 0.47103609}, {"v": "0.0652939"}]},
        {"c" : [{"v": "2011"}, {"v": 0.52668605420031}, {"v": "0.0752939"}]},
        {"c" : [{"v": "2012"}, {"v": 0.57103609}, {"v": "0.0852939"}]},
        {"c" : [{"v": "2012"}, {"v": 0.62668605420031}, {"v": "0.0952939"}]},
        {"c" : [{"v": "2013"}, {"v": 0.67103609}, {"v": "0.1052939"}]},
        {"c" : [{"v": "2013"}, {"v": 0.72668605420031}, {"v": "0.2152939"}]}
      ]
    });

    // convert first column to number
    var view = new google.visualization.DataView(data);
    view.setColumns([{
      calc: function (dt, row) {
        return parseInt(dt.getValue(row, 0));
      },
      label: data.getColumnLabel(0),
      type: 'number'
    }, 1, 2]);

    var options = {
      hAxis: {
        format: '0',
        ticks: view.getDistinctValues(0)
      },
      legend: 'none'
    };

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(view, options);  // <-- use view to draw chart
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart"></div>

编辑2

另一个选择是将轴保持为离散（字符串），
并简单地从数据中删除重复的标签

这也可以使用数据视图来完成......

// remove duplicates from first column
var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function (dt, row) {
    var xValue = dt.getValue(row, 0);
    if ((row > 0) && (xValue === dt.getValue(row - 1, 0))) {
      return null;
    } else {
      return xValue;
    }
  },
  label: data.getColumnLabel(0),
  type: 'string'
}, 1, 2]);

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"type": "string" ,"id": "Data" ,"label": "Label" },
        {"type": "number" ,"id": "Performance" ,"label": "Performance" },
        {"type": "number" ,"id": "Index" ,"label": "Index" }
      ],
      "rows": [
        {"c" : [{"v": "2008"}, {"v": 0}, {"v": "0"}]},
        {"c" : [{"v": "2008"}, {"v": 0.07103609}, {"v": "0.0052939"}]},
        {"c" : [{"v": "2008"}, {"v": 0.12668605420031}, {"v": "0.0152939"}]},
        {"c" : [{"v": "2009"}, {"v": 0.27103609}, {"v": "0.0252939"}]},
        {"c" : [{"v": "2009"}, {"v": 0.32668605420031}, {"v": "0.0352939"}]},
        {"c" : [{"v": "2010"}, {"v": 0.37103609}, {"v": "0.0452939"}]},
        {"c" : [{"v": "2010"}, {"v": 0.42668605420031}, {"v": "0.0552939"}]},
        {"c" : [{"v": "2011"}, {"v": 0.47103609}, {"v": "0.0652939"}]},
        {"c" : [{"v": "2011"}, {"v": 0.52668605420031}, {"v": "0.0752939"}]},
        {"c" : [{"v": "2012"}, {"v": 0.57103609}, {"v": "0.0852939"}]},
        {"c" : [{"v": "2012"}, {"v": 0.62668605420031}, {"v": "0.0952939"}]},
        {"c" : [{"v": "2013"}, {"v": 0.67103609}, {"v": "0.1052939"}]},
        {"c" : [{"v": "2013"}, {"v": 0.72668605420031}, {"v": "0.2152939"}]}
      ]
    });

    // remove duplicates from first column
    var view = new google.visualization.DataView(data);
    view.setColumns([{
      calc: function (dt, row) {
        var xValue = dt.getValue(row, 0);
        if ((row > 0) && (xValue === dt.getValue(row - 1, 0))) {
          return null;
        } else {
          return xValue;
        }
      },
      label: data.getColumnLabel(0),
      type: 'string'
    }, 1, 2]);

    var options = {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 12,
        left: 24,
        bottom: 48,
        right: 4
      },
      hAxis: {
        maxAlternation: 1
      },
      height: '100%',
      legend: 'none',
      width: '100%'
    };

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(view, options);
    $(window).resize(function() {
      chart.draw(view, options);
    });
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart"></div>

Answer 2

VICTORY！

所以我终于开始工作了。 WhiteHat，你是一个绝对的天才！谢谢！编辑2完成了这个技巧，但我为hAxis添加了一个额外的属性，以显示所有标签（见下文）。

showTextEvery:1

以下是有此问题的其他人的完整实施。

var data = new google.visualization.DataTable(@Html.Raw(Json.Encode(perfData)));

                                var view = new google.visualization.DataView(data);
                                view.setColumns([{
                                    calc: function (dt, row) {
                                        var xValue = dt.getValue(row, 0);
                                        if ((row > 0) && (xValue === dt.getValue(row-1, 0))) {
                                            return null;
                                        } else {
                                            return xValue;
                                        }
                                    },
                                    label: data.getColumnLabel(0),
                                    type: 'string'
                                }, 1, 2]);

                                var options = {
                                    chartArea : { left: 40, top:10},
                                    width:450,
                                    height: 300,

                                    hAxis: {
                                        slantedText: true,
                                        slantedTextAngle: 90,
                                        showTextEvery:1
                                    },

                                    legend:{position:'bottom'},
                                    vAxis: {
                                        format: '#%',
                                        gridlines: {count: 7}
                                    }
                                };
                                var chart_div = document.getElementById('returnsChart');
                                var chart = new google.visualization.LineChart(chart_div);

                                chart.draw(view, options);
                                $(window).resize(function () {
                                    chart.draw(view, options);
                                });

下面是最终图片：

倾斜文本时重复hAxis标签 - Google Charts

2 个答案: