javascript - 谷歌图表 : how to make right side of the "white space" empty?

Question

我使用 Google Chart 来构建一些图形和文字描述。

在第一次迭代中，我为每种图表类型使用了小“标题”，看起来效果不错。但在某些时候，我已经为每个图表添加了总值……并且文本开始被换行。

问题 1:有什么方法可以防止文本换行(请参见图表的右侧部分)？

我试过将文本放在“...”中，但 Google 图表只是将这些标签转换为纯文本。

问题 2:有什么方法可以将整个图形向左移动并占用未使用的区域，以便右侧部分有更多空间用于文本？

欢迎提出任何想法!可能还有其他适合我的解决方案？

附言请在屏幕截图上查看现在的样子:

P.P.S 这是我用来显示图表的 JS 代码

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/google/jsapi.js"></script>
<script type="text/javascript">

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    var expArray = [<%=ExperienceArray %>];

    function drawChart() {
        if (expArray.length > 0) {
            $('#chart_div').show();
            $('#MessagesDiv').hide();

            var total = 0, train = 0, match = 0, ageing = 0;
            for (var i = 0; i < expArray.length; i++) {
                total += expArray[i][1];
                train += expArray[i][2];
                match += expArray[i][3];
                ageing += expArray[i][4];
            }
            var data = google.visualization.arrayToDataTable([
                ['№', 'Total (' + total + ')', 'Training (' + train + ')', 'Matches (' + match + ')', 'Ageing (' + ageing + ')']
            ].concat(expArray));

            var options = {
                title: 'Gained experience',
                allowHtml: 'true',
                hAxis: { title: '', titleTextStyle: { color: 'black' } },
                colors: ['#00FF00', '#6600CC', '#0000CC', '#000000']
            };

            var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        } else {
            $('#chart_div').hide();
            alert("Data are absent");
        }
    }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 1

将以下代码(根据需要进行调整)添加到您的选项中:chartArea: {left: 0}

所以你的选项文件会变成这样:

        var options = {
            title: 'Gained experience',
            allowHtml: 'true',
            hAxis: { title: '', titleTextStyle: { color: 'black' } },
            colors: ['#00FF00', '#6600CC', '#0000CC', '#000000'],
            chartArea: {left: 0}
        };

注意:当前设置将切掉整个轴标签，因此您想使用尺寸大于 0 的适当值(您可以使用算法计算某些值，或者只是摆弄直到获得所需的值它)。

然而，对于传说，没有技巧。

当 Google 为图表创建 SVG 时，它会将图例分成两行(两个单独的 SVG 文本元素)，因此不容易调整。你不能很容易地修复它。一种选择是创建一个单独的图表，其中仅包含图例(没有图表区域)以模拟图例，然后将两个图表链接在一起(如果您希望单击与图例的交互)。

或者，您可以使用 legend: {textStyle: {fontSize: 8}} 或任何字体大小来减小字体大小以防止文本换行(同样，您可以创建算法或 fiddle 直到它起作用为止)。

作为一个单独的选项，您可以创建一个手动图例并使用 javascript 来模拟点击交互，然后您可以使用 CSS/Javascript 根据需要对其进行格式化。