Question

是的，所以我设置了我的图表，但如果它们不适合图形的div，那么侧面标签或条形标题会被切断，所以我的问题是，无论如何都要溢出图形的条形图标题（字体大小太小而无法读取，因此我无法将其缩小）甚至包装文本。

很好看，因为我不认为代码会帮助我无论如何都会显示它，请注意，我的空间有限，而且我在该空间中显示2个图形。我需要的是侧面标签溢出：显示（所以如果特定的条形标签溢出它显示的区域..

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
</head>
<body>
<div>
<div id="myChart" style="width:50%"></div>
</div>
<script type="text/javascript">
$(function(){
    var id = "myChart";
    var chartData= [["The big label that is the issue in this case we need this to display  its overflow","74","",""],["Louise","71","",""],["Louise.v.2","0","",""],["member1","72","",""],["member3","67","",""]];

    var defaultColors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262",
"#5574a6", "#3b3eac", "#b77322", "#16d620", "#b91383", "#f4359e", "#9c5935", "#a9c413", "#2a778d", "#668d1c",
"#bea413", "#0c5922", "#743411"];

    var counter = 0;

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', '');
    data.addColumn({ type: 'string', role: "style" });
    data.addColumn({ type: 'string', role: 'annotation' });
    if (chartData[0][3].length > 0) {
        data.addColumn('number', '');
    }

    data.addRows(chartData.length + 1);
    for (var i = 0; i < chartData.length; i++) {
         var thisItem = chartData[i];
         data.setCell(i, 0, thisItem[0]);
         data.setCell(i, 1, thisItem[1]);
         if (thisItem[2].length > 0) {
              data.setCell(i, 2, "color: #000000");
         } else {
              data.setCell(i, 2, "color: " + defaultColors[counter]);
         }
         data.setCell(i, 3, thisItem[1] + "%");
         if (thisItem[3].length > 0) {
              data.setCell(i, 4, thisItem[3]);
         }
         counter = counter + 1;
         if (counter == 31) {
             counter = 0;
         }
     }

     var barChart = null;
     var options = null;

     barChart = new google.visualization.ComboChart(document.getElementById(id));

     var fullHeight = ((chartData.length + 1) * 20) + 50;
     var minHieght = 200;

     options = {
         height: fullHeight,
         tooltip: { isHtml: true },
         max: 100,
         label: 'value',
         orientation: 'vertical',
         fontSize: 15,
         width: (((($(window).width() / 3) * 2) / 5) * 3),
         legend: { position: 'none' },
         bar: { groupWidth: 15, width: 20 },
         chartArea: { height: fullHeight - 50, width: "47%", left: "50%", top: 0 },
         backgroundColor: 'transparent',
         enableInteractivity: false,
         legend: 'none',
         seriesType: 'bars',
         series: { 1: { type: 'line', lineWidth: 5, enableInteractivity: false, color: 'grey' } },
         annotations: {
             alwaysOutside: true
         }
    };

    barChart.draw(data, options);
});
</script>
</body>
</html>

谷歌条形图边标签中断

0 个答案: