4

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

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

问题 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>
4

1 回答 1

7

将以下代码（根据需要进行调整）添加到您的选项中：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 来设置您想要的格式。

于 2013-04-02T10:23:46.200 回答