Question

我有一个组合图表运行良好，但我不能让它同时显示轴标签和轴标题，只有一个或另一个。我怎样才能显示它们？

代码：

google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'group');
    data.addColumn('number', 'value');
    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true, targetAxisIndex: 0}});
    data.addColumn('number', 'count');
    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true, targetAxisIndex: 0}});
    data.addRow([1404, 73.4, '<div class="tooltip-label"><strong>Group:</strong> 1404<br><strong>Value:</strong> 73.4</div>', 4, '<div class="tooltip-label"><strong>Group:</strong> 1404<br><strong>Count:</strong> 4</div>'])
    data.addRow([1406, 201.5, '<div class="tooltip-label"><strong>Group:</strong> 1406<br><strong>Value:</strong> 201.5</div>', 7, '<div class="tooltip-label"><strong>Group:</strong> 1406<br><strong>Count:</strong> 7</div>'])
    data.addRow([1407, 52.1, '<div class="tooltip-label"><strong>Group:</strong> 1407<br><strong>Value:</strong> 52.1</div>', 3, '<div class="tooltip-label"><strong>Group:</strong> 1407<br><strong>Count:</strong> 3</div>'])
    data.addRow([1408, 38.9, '<div class="tooltip-label"><strong>Group:</strong> 1408<br><strong>Value:</strong> 38.9</div>', 9, '<div class="tooltip-label"><strong>Group:</strong> 1408<br><strong>Count:</strong> 9</div>'])


    var options = {
        vAxes: {
            0: {title: 'value', textStyle: {color: 'blue'}, titleTextStyle: {fontSize: 12, bold: 'true'}}, 
            1: {title: 'count', textStyle: {color: 'red'}, titleTextStyle: {fontSize: 12, bold: 'true'}}
        },
        hAxis: {
            // title: 'group',
            titleTextStyle: {
                fontSize: 12, 
                bold: 'true'
            },
            format: '####'
        },
        seriesType: 'bars',
        series: {1: {type: 'line', targetAxisIndex: 1, pointSize: 3}},
        backgroundColor: 
        { 
            fill: 'transparent' 
        },
        legend: 
        {
            position: 'bottom'
        },
        tooltip: 
        {
            isHtml: 'true'
        }
    };

    var chart = new google.visualization.ComboChart(jQuery('#chart')[0]);
    chart.draw(data, options);
}

Answer 1

如果图表没有“预订”空间，您必须这样做。试试像

这样的东西

<style>
#chart { 
    width: 50%; 
    height: 100%; 
} 
</style>

在头部。

Google Combo Chart - 添加hAxis.title会删除轴标签吗？

1 个答案: