Question

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

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

问题1：有没有办法防止文本换行（请参阅图表右侧部分）？

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

问题2：有没有办法将整个图形向左移动并消耗未使用的区域，以便正确的部分有更多的文本空间？

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

P.S。请在屏幕截图中查看现在的样子： enter image description here

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的东西（你可以用算法计算一些东西，或者只是你想要它就像你想要的那样它）。

但是，对于传奇，没有诀窍。

当谷歌为图表创建SVG时，它会将图例分成两行（两个单独的SVG文本元素），因此不容易调整。你不能很容易地解决它。一种选择是创建一个单独的图表，其中只包含模拟图例的图例（并且没有图表区域），然后将两个图表链接在一起（如果您想要点击与图例的交互）。

或者，您可以使用legend: {textStyle: {fontSize: 8}}缩小字体大小，或者使用任何字体大小来阻止文本换行（再次，您可以创建算法或使用它来调整它，直到它起作用）。

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

谷歌图表：如何让“白色空间”的右侧空着？

1 个答案: