未在可视化组合图中绘制的线

时间:2015-03-31 12:49:06

标签: javascript google-visualization

我的数据包含名为TestNameTestValue的列。

有了这个,我想绘制一个Combo-chart,以便渲染条形和线条。

Link to Combo Charts of Google

但是,在我的情况下,它代表条形或线条。

var options = {
                   title: 'TestType v/s TestValue on ComboChart',
                    vAxis: {title: 'TestValue',  titleTextStyle: {color: 'red'}},
                     hAxis: {title: 'TestType', titleTextStyle: {color: 'blue'}},
                     seriesType: "bars",
                     series: {0: {type: "line"}},
                    width:600,
                    height:400
                };

当我对系列有0值时,它只渲染条形码:

如下:

enter image description here

我不知道这个数字对系列的重要性。我真正想要的就是在同一张图表上有条形和相应的线条。

编辑:我意识到组合图表只有在最少2个系列时才会这样。是否可以选择组合图形而不强制使用多个系列?

1 个答案:

答案 0 :(得分:0)

使用视图可以重复使用相同的列。

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ["TestType", "TestValue"],
        ["BP", 120],
        ["Temperature", 100],
        ["Cholestrol", 80],
        ["Cavity", 1]
    ]);
    
    var view = new google.visualization.DataView(data); 
    view.setColumns([0,1,1]);

    var options = {

        title: 'TestType v/s TestValue on ComboChart',
        vAxis: {
            title: 'TestValue',
            titleTextStyle: {
                color: 'red'
            }
        },
        hAxis: {
            title: 'TestType',
            titleTextStyle: {
                color: 'blue'
            }
        },
        seriesType: "bars",
        series: {
            0: {
                type: "line",
                color: "blue"
            },            
            1: {
                color: "blue",
                visibleInLegend: false
            }
        },
        width: 600,
        height: 400
    }


    var chart = new google.visualization.ComboChart(document.getElementById("chart"));
    chart.draw(view, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 900px; height: 300px;"></div>