谷歌可视化缩写列标签

Google Visualization Abbreviating Column Labels

本文关键字：标签 缩写 可视化 谷歌      更新时间：2023-09-26

使用google可视化API，是否有一种方法可以使表的列标题缩短，但在使用相同数据集的饼状图中显示完整的列标签?

下面是javascript的一个片段:

    //create the dashboard and table chart
    var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));
    table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'chart_div',
        'view': {'columns': ViewColumns},
        'options': {
            height: 400,
        },
    });
    dashboard.bind(table);
    //bind the data to the table
    baseData = new google.visualization.DataTable(response);
    dashboard.draw(baseData);
//add a column chart bound to the same data
var columnChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'column_chart_div',
    'options': {
        isStacked: true,
        height: 400,
        width: 800,
    },
});
columnChart.setDataTable(table.getDataTable());
columnChart.draw();
HTML: 

  <div id="dashboard_div">
    <div id="column_chart_div" class="inline"> </div>
    <div id="chart_div"></div>

th.google-visualization-table-th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;  
}
th.google-visualization-table-th:hover {
  white-space: nowrap;
  overflow: visible;
}

如果我能让全文在悬停时(在相邻列的上方)弹出，那将是完美的，但是我没有做到这一点。

相关文章：