谷歌图表:如何让右侧的“空白”空?

I use Google Chart in order to build some graphichs together with text description.

我使用谷歌图表来构建一些图形和文本描述。

On the first iteration I used small "title" for each graph type and that was looking well. But at some point I've added total value for each graph... and text started to be wrapped.

在第一次迭代中，我为每个图形类型使用了小的“title”，这看起来很不错。但在某一时刻，我为每个图形增加了总价值……文字开始被包裹起来。

Question 1: Is there any way to prevent text wrapping (see the right portion of the chart)?

问题1:有什么方法可以防止文本包装吗?

I've tried put text inside of "..." but Google chart just convert these tags into pure text.

我试过把文本放到“…”里面，但是谷歌只把这些标签转换成纯文本。

Question 2: Is there any way to move whole graph to the left and consume unused area so the right part will have more space for text?

问题2:是否有办法将整个图形向左移动并消耗未使用的区域，从而使右边的部分有更多的文本空间?

Any thoughts are welcome! Probably there is any other solution that will work for me?

任何的想法是受欢迎的!可能还有其他的解决方法对我有用吗?

P.S. Please see how that looks right now on the screenshot: 谷歌图表:如何让右侧的“空白”空?

附注:请看屏幕截图:

P.P.S Here is JS code I use to display the graphs

最大功率这里是我用来显示图形的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>

1 个解决方案

#1

Add the following code (adjust as necessary) to your options: chartArea: {left: 0}

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

So your options file would become this:

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

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

Note: the current setting will slice off the entire axis labels, so you want to use something appropriate in size bigger than 0 (you can calculate something with an algorithm, or just fiddle until you have it like you want it).

注意:当前的设置将分割整个轴标签，因此您希望使用大小大于0的适当的东西(您可以使用算法计算一些东西，或者只是在得到它之前进行修改)。

For the legend, however, there is no trick.

然而，对于传说来说，没有什么诀窍。

When Google creates the SVG for the chart, it will split the legend in to two lines (two separate SVG text elements) so it's not easy to tweak. You can't very well fix it easily. One option is to create a separate chart with just the legend (and no chart area) which will mimic the legend, and then link the two charts together (if you want click interactivity with the legend).

当谷歌为图表创建SVG时，它将图例分割为两行(两个独立的SVG文本元素)，因此不容易调整。你不可能很容易地把它修好。一种选择是创建一个单独的图表，只使用图例(没有图表区)来模拟这个图例，然后将这两个图表链接在一起(如果你想点击这个图例的话)。

Alternatively, you can reduce the font size using legend: {textStyle: {fontSize: 8}} or whatever font size will prevent the text from wrapping (again, you can create an algorithm or fiddle with it until it works).

或者，您可以使用legend来减少字体大小:{textStyle: {fontSize: 8}}或者任何字体大小将阻止文本的包装(同样，您可以创建一个算法或修改它直到它工作为止)。

As a separate option, you can create a manual legend and use javascript to mimic click interactivity, and then you can use CSS/Javascript to format it however you want.

作为一个单独的选项，您可以创建一个手动图例，并使用javascript来模拟单击交互性，然后您可以使用CSS/ javascript来格式化它。

#1