Question

我想在柱形图上垂直使用注释而不是水平注释。

这是一个没有注释的示例： http://jsfiddle.net/441cvw9o/2/

这是带水平注释的代码：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1./jquery.min.js"></script>
<script type="text/javascript"  src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("visualization", "1", {packages: ["controls"]});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
var query = new google.visualization.Query('//docs.google.com/spreadsheets/d/1bUrqUns3PZiPGDiY_cHdUN0EPVP0-RdoWvMZ7ZvqHyY/edit#gid=0');
query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
}

var data = response.getDataTable();

var dashboard = new google.visualization.Dashboard(document.getElementById('chart_div'));

var catPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
        'containerId': 'filter_div',
        'options': {
        'filterColumnIndex': '0',
            'ui': {
            'stacked': false,
                'allowMultiple': false,
                'labelStacking': 'horizontal',
                'cssClass': 'mainCat',
                'label': 'Population',
                'sortValues': false,
                'allowNone': false,
                'caption': 'Select a population'
        }
    }
});

var subCatPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
        'containerId': 'filter1_div',
        'options': {
        'filterColumnIndex': '1',
            'ui': {
            'stacked': false,
                'allowMultiple': false,
                'labelStacking': 'horizontal',
                'cssClass': 'subCat',
                'label': 'Characteristic',
                'sortValues': false,
                'allowNone': false,
                'caption': 'You must select a population'
        }
    }
});

var columnChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
        'containerId': 'chart_div',
        'view': {
        'columns': [2, 3]
        },
        'options': {
        'animation': {
            'duration': 1000,
            'easing': 'out',
            'displayAnnotations': 'true'
        },
            'legend': 'right',
            'vAxis': {
            'title': 'Percentage',
                'titleTextStyle': {
                'italic': false
            },
                'viewWindow': {
                'min': 0,
                'max': 1.00001
            },
                'gridlines': {
                'color': '#CCC'
            }
        },
            'bar': {
            'groupWidth': '95%'
        }

    }

});


var tableChart = new google.visualization.ChartWrapper({
    'chartType': 'Table',
        'containerId': 'table_div',
        'view': {
        'columns': [3, 4]
    },
        'allowHtml': true,
        'options': {
        'alternatingRowStyle': true
    }

});

dashboard.bind([catPicker], [subCatPicker, columnChart, tableChart]).bind([subCatPicker], [columnChart, tableChart]);


function drawChart() {
    dashboard.draw(data);
}
drawChart();

$('#subc').change(function () {
    var options = $("#subc option");
    var optionSelected = options.index(options.filter(":selected"));
    if (optionSelected === 0) {
        tableChart.setView({
            'columns': [2, 3]
        });
        columnChart.setView({
            'columns': [2, 3]
        });
    } else if (optionSelected === 1) {
        tableChart.setView({
            'columns': [2, 3, 4, 5, 6, 7]
        });
        columnChart.setView({
            'columns': [2, 3, 4, 5, 6, 7]
        });
    } else if (optionSelected === 2) {
        tableChart.setView({
            'columns': [2, 3, 4]
        });
        columnChart.setView({
            'columns': [2, 3, 4, { 
    calc: "stringify",
    sourceColumn: 4,
    type: "string",
    role: "annotation"
}]
        });
    } else if (optionSelected === 3) {
        tableChart.setView({
            'columns': [2, 3, 5]
        });
        columnChart.setView({
            'columns': [2, 3, 5, { 
    calc: "stringify",
    sourceColumn: 5,
    type: "string",
    role: "annotation"
}]
        });
    } else if (optionSelected === 4) {
        tableChart.setView({
            'columns': [2, 3, 6]
        });
        columnChart.setView({
            'columns': [2, 3, 6]
        });
    } else if (optionSelected === 5) {
        tableChart.setView({
            'columns': [2, 3, 7, 8, 9]
        });
        columnChart.setView({
            'columns': [2, 3, 7, 8, 9]
        });
    } else if (optionSelected === 6) {
        tableChart.setView({
            'columns': [2, 3, 7]
        });
        columnChart.setView({
            'columns': [2, 3, 7]
        });
    } else if (optionSelected === 7) {
        tableChart.setView({
            'columns': [2, 3, 8]
        });
        columnChart.setView({
            'columns': [2, 3, 8]
        });
    } else if (optionSelected === 8) {
        tableChart.setView({
            'columns': [2, 3, 9]
        });
        columnChart.setView({
            'columns': [2, 3, 9]
        });
    } else if (optionSelected === 9) {
        tableChart.setView({
            'columns': [2, 3, 10]
        });
        columnChart.setView({
            'columns': [2, 3, 10]
        });
    } else if (optionSelected === 10) {
        tableChart.setView({
            'columns': [2, 3, 11]
        });
        columnChart.setView({
            'columns': [2, 3, 11]
        });
    } else {
        tableChart.setView({
            'columns': [1]
        });
        columnChart.setView({
            'columns': [1]
        });
    }

    drawChart();
});
}

</script>

    <div id="mainContent">
<div class="chart-filter">
    <div id="filter_div" class="filter">&#160;</div>
    <div id="filter1_div" class="filter">&#160;</div>
    <div id="filter2_div" class="filter">
        <label class="google-visualization-controls-label">Filter</label>
        <select id="subc" class="filter-cat">
            <option selected="selected" value="a1">Overall</option>
            <optgroup label="Region" value="o1">
                <option value="a2">All regions</option>
                <option value="a3">North</option>
                <option value="a4">South</option>
                <option value="a5">East</option>
                <option value="a6">West</option>
            </optgroup>
            <optgroup label="Work type" value="o2">
                <option value="a7">All income brackets</option>
                <option value="a8">Income Bracket 50K+</option>
                <option value="a9">Income Bracket (40-50K)</option>
                <option value="a10">Income Bracket (30K-40K)</option>
            </optgroup>
        </select>
    </div>
</div>
<div style="WIDTH: 850px;height:550px; max-height:550px;" id="chart_div">&#160;</div>
<div style="WIDTH: 850px" id="table_div">&#160;</div>
</div>

＆＃13;

    <script type="text/javascript">

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

function drawVisualization() {
var query = new google.visualization.Query('//docs.google.com/spreadsheets/d/1bUrqUns3PZiPGDiY_cHdUN0EPVP0-RdoWvMZ7ZvqHyY/edit#gid=0');
query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
}

var data = response.getDataTable();

var dashboard = new google.visualization.Dashboard(document.getElementById('chart_div'));

var catPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
        'containerId': 'filter_div',
        'options': {
        'filterColumnIndex': '0',
            'ui': {
            'stacked': false,
                'allowMultiple': false,
                'labelStacking': 'horizontal',
                'cssClass': 'mainCat',
                'label': 'Population',
                'sortValues': false,
                'allowNone': false,
                'caption': 'Select a population'
        }
    }
});

var subCatPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
        'containerId': 'filter1_div',
        'options': {
        'filterColumnIndex': '1',
            'ui': {
            'stacked': false,
                'allowMultiple': false,
                'labelStacking': 'horizontal',
                'cssClass': 'subCat',
                'label': 'Characteristic',
                'sortValues': false,
                'allowNone': false,
                'caption': 'You must select a population'
        }
    }
});

var columnChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
        'containerId': 'chart_div',
        'view': {
        'columns': [2, 3]
        },
        'options': {
        'animation': {
            'duration': 1000,
            'easing': 'out',
            'displayAnnotations': 'true'
        },
            'legend': 'right',
            'vAxis': {
            'title': 'Percentage',
                'titleTextStyle': {
                'italic': false
            },
                'viewWindow': {
                'min': 0,
                'max': 1.00001
            },
                'gridlines': {
                'color': '#CCC'
            }
        },
            'bar': {
            'groupWidth': '95%'
        }

    }

});


var tableChart = new google.visualization.ChartWrapper({
    'chartType': 'Table',
        'containerId': 'table_div',
        'view': {
        'columns': [3, 4]
    },
        'allowHtml': true,
        'options': {
        'alternatingRowStyle': true
    }

});

dashboard.bind([catPicker], [subCatPicker, columnChart, tableChart]).bind([subCatPicker], [columnChart, tableChart]);


function drawChart() {
    dashboard.draw(data);
}
drawChart();

$('#subc').change(function () {
    var options = $("#subc option");
    var optionSelected = options.index(options.filter(":selected"));
    if (optionSelected === 0) {
        tableChart.setView({
            'columns': [2, 3]
        });
        columnChart.setView({
            'columns': [2, 3]
        });
    } else if (optionSelected === 1) {
        tableChart.setView({
            'columns': [2, 3, 4, 5, 6, 7]
        });
        columnChart.setView({
            'columns': [2, 3, 4, 5, 6, 7]
        });
    } else if (optionSelected === 2) {
        tableChart.setView({
            'columns': [2, 3, 4]
        });
        columnChart.setView({
            'columns': [2, 3, 4, { 
    calc: "stringify",
    sourceColumn: 4,
    type: "string",
    role: "annotation"
}]
        });
    } else if (optionSelected === 3) {
        tableChart.setView({
            'columns': [2, 3, 5]
        });
        columnChart.setView({
            'columns': [2, 3, 5, { 
    calc: "stringify",
    sourceColumn: 5,
    type: "string",
    role: "annotation"
}]
        });
    } else if (optionSelected === 4) {
        tableChart.setView({
            'columns': [2, 3, 6]
        });
        columnChart.setView({
            'columns': [2, 3, 6]
        });
    } else if (optionSelected === 5) {
        tableChart.setView({
            'columns': [2, 3, 7, 8, 9]
        });
        columnChart.setView({
            'columns': [2, 3, 7, 8, 9]
        });
    } else if (optionSelected === 6) {
        tableChart.setView({
            'columns': [2, 3, 7]
        });
        columnChart.setView({
            'columns': [2, 3, 7]
        });
    } else if (optionSelected === 7) {
        tableChart.setView({
            'columns': [2, 3, 8]
        });
        columnChart.setView({
            'columns': [2, 3, 8]
        });
    } else if (optionSelected === 8) {
        tableChart.setView({
            'columns': [2, 3, 9]
        });
        columnChart.setView({
            'columns': [2, 3, 9]
        });
    } else if (optionSelected === 9) {
        tableChart.setView({
            'columns': [2, 3, 10]
        });
        columnChart.setView({
            'columns': [2, 3, 10]
        });
    } else if (optionSelected === 10) {
        tableChart.setView({
            'columns': [2, 3, 11]
        });
        columnChart.setView({
            'columns': [2, 3, 11]
        });
    } else {
        tableChart.setView({
            'columns': [1]
        });
        columnChart.setView({
            'columns': [1]
        });
    }

    drawChart();
});
}

</script>

    <div id="mainContent">
<div class="chart-filter">
    <div id="filter_div" class="filter">&#160;</div>
    <div id="filter1_div" class="filter">&#160;</div>
    <div id="filter2_div" class="filter">
        <label class="google-visualization-controls-label">Filter</label>
        <select id="subc" class="filter-cat">
            <option selected="selected" value="a1">Overall</option>
            <optgroup label="Region" value="o1">
                <option value="a2">All regions</option>
                <option value="a3">North</option>
                <option value="a4">South</option>
                <option value="a5">East</option>
                <option value="a6">West</option>
            </optgroup>
            <optgroup label="Work type" value="o2">
                <option value="a7">All income brackets</option>
                <option value="a8">Income Bracket 50K+</option>
                <option value="a9">Income Bracket (40-50K)</option>
                <option value="a10">Income Bracket (30K-40K)</option>
            </optgroup>
        </select>
    </div>
</div>
<div style="WIDTH: 850px;height:550px; max-height:550px;" id="chart_div">&#160;</div>
<div style="WIDTH: 850px" id="table_div">&#160;</div>
</div>

如何垂直使用注释到列图而不是水平

0 个答案: