谷歌图表:如何让"白色空间"的右侧空着？

Question

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

在第一次迭代中,我为每种图形类型使用了小"标题",并且看起来很好.但在某些时候,我已经为每个图表添加了总价值......并且文本开始被包装.

问题1:有没有办法防止文本换行(参见图表的右侧部分)？

我已经尝试将文本放在"..."中,但谷歌图表只是将这些标签转换为纯文本.

问题2:有没有办法将整个图形向左移动并消耗未使用的区域,这样右边的部分将有更多的文本空间？

欢迎任何想法!可能有任何其他解决方案对我有用吗？

PS请在屏幕截图中查看现在的样子:

PPS这是我用来显示图形的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}}或任何字体大小将阻止文本包装(再次,你可以创建一个算法或摆弄它直到它工作).

作为单独的选项,您可以创建手动图例并使用javascript来模仿单击交互性,然后您可以使用CSS/Javascript格式化它,无论您想要什么.