1
我想知道你是否可以使用ChartRangeFilter这种类型的图表。由于根据您的搜索此数据将继续水平增长。是的，我必须使用气泡。否则我可以进行水平滚动，但垂直轴不移动。可以添加ChartRangeFilter到泡泡图吗？
我不知道把什么其他在后：/要我继续ingrensando更多的描述
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var Alarmas = new Array();
Alarmas[1] = 'PROP1_BID';
Alarmas[2] = 'PROP1_ASK';
Alarmas[3] = 'PROP2_BID';
Alarmas[4] = 'PROP2_ASK';
Alarmas[5] = 'PROV1_ASK_05';
Alarmas[6] = 'PROV1_ASK_10';
Alarmas[7] = 'PROV1_ASK_20';
Alarmas[8] = 'PROV1_ASK_60';
Alarmas[9] = 'PROV1_ASK_X';
Alarmas[10] = 'PROV1_BID_05';
Alarmas[11] = 'PROV1_BID_10';
Alarmas[12] = 'PROV1_BID_20';
Alarmas[13] = 'PROV1_BID_60';
Alarmas[14] = 'PROV1_BID_X';
Alarmas[15] = 'PROV2_BID';
Alarmas[16] = 'PROV2_ASK';
Alarmas[17] = 'PROV3';
Alarmas[18] = 'OPEV1_05';
Alarmas[19] = 'OPEV1_10';
Alarmas[20] = 'OPEV1_20';
Alarmas[21] = 'OPEV1_60';
Alarmas[22] = 'OPEV1_X';
Alarmas[23] = 'OPEV2';
Alarmas[24] = 'OPEV3_01';
Alarmas[25] = 'OPEV3_05';
Alarmas[26] = 'OPEV3_10';
Alarmas[27] = 'OPEV3_20';
Alarmas[27] = 'OPEV3_60';
Alarmas[28] = 'OPEV3_X';
Alarmas[29] = 'OPEP1';
Alarmas[30] = 'OPEP2_01';
Alarmas[31] = 'OPEP2_05';
Alarmas[32] = 'OPEP2_10';
Alarmas[33] = 'OPEP2_20';
Alarmas[34] = 'OPEP2_60';
Alarmas[35] = 'OPEP2_X';
Alarmas[36] = 'OPEP3_05';
Alarmas[37] = 'OPEP3_10';
Alarmas[38] = 'OPEP3_20';
Alarmas[39] = 'OPEP3_60';
Alarmas[40] = 'OPEP3_X';
Alarmas[41] = 'AA1';
Alarmas[42] = 'AA2_05';
Alarmas[43] = 'AA2_10';
Alarmas[44] = 'AA2_20';
Alarmas[45] = 'AA2_60';
Alarmas[46] = 'AA2_X';
Alarmas[47] = 'AA3_05';
Alarmas[48] = 'AA3_10';
Alarmas[49] = 'AA3_20';
Alarmas[50] = 'AA3_60';
Alarmas[51] = 'AA3_X';
var Valores = new Array();
Valores[1] = 'BVN';
Valores[2] = 'LTOTALC1';
Valores[3] = 'LUISAI1';
Valores[4] = 'CORAREI1';
Valores[5] = 'CORAREC1';
Valores[6] = 'CONTINC1';
Valores[7] = 'MILENIC1';
Valores[8] = 'ORCL';
Valores[9] = 'YHOO';
Valores[10] = 'COFIINC1';
var options = {
title: 'Valor/Alarma Grid',
colorAxis: {
colors: ['#67DC41', '#FDFF66', '#FF7373']
},
tooltip: {
trigger: 'none'
},
sizeAxis: {
maxSize: 30,
minSize: 2
},
bubble: {
textStyle: {
fontSize: 14,
fontName: 'Times-Roman',
color: 'white',
bold: true,
italic: true,
auraColor: 'none'
},
opacity: 1
},
hAxis: {
slantedText: true,
slantedTextAngle: 90,
viewWindowMode: 'explicit',
viewWindow: {
max: Alarmas.length,
min: 0,
},
gridlines: {
count: Alarmas.length,
color: 'rgb(227, 225, 225)',
},
textStyle: {
fontSize: 12
},
ticks: [{
v: 1,
f: 'PROP1_BID'
},
{
v: 2,
f: 'PROP1_ASK'
},
{
v: 3,
f: 'PROP2_BID'
},
{
v: 4,
f: 'PROP2_ASK'
},
{
v: 5,
f: 'PROV1_ASK_05'
},
{
v: 6,
f: 'PROV1_ASK_10'
},
{
v: 7,
f: 'PROV1_ASK_20'
},
{
v: 8,
f: 'PROV1_ASK_60'
},
{
v: 9,
f: 'PROV1_ASK_X'
},
{
v: 10,
f: 'PROV1_BID_05'
},
{
v: 11,
f: 'PROV1_BID_10'
},
{
v: 12,
f: 'PROV1_BID_20'
},
{
v: 13,
f: 'PROV1_BID_60'
},
{
v: 14,
f: 'PROV1_BID_X'
},
{
v: 15,
f: 'PROV2_BID'
},
{
v: 16,
f: 'PROV2_ASK'
},
{
v: 17,
f: 'PROV3'
},
{
v: 18,
f: 'OPEV1_05'
},
{
v: 19,
f: 'OPEV1_10'
},
{
v: 20,
f: 'OPEV1_20'
},
{
v: 21,
f: 'OPEV1_60'
},
{
v: 22,
f: 'OPEV1_X'
},
{
v: 23,
f: 'OPEV2'
},
{
v: 24,
f: 'OPEV3_01'
},
{
v: 25,
f: 'OPEV3_05'
},
{
v: 26,
f: 'OPEV3_10'
},
{
v: 27,
f: 'OPEV3_20'
},
{
v: 27,
f: 'OPEV3_60'
},
{
v: 28,
f: 'OPEV3_X'
},
{
v: 29,
f: 'OPEP1'
},
{
v: 30,
f: 'OPEP2_01'
},
{
v: 31,
f: 'OPEP2_05'
},
{
v: 32,
f: 'OPEP2_10'
},
{
v: 33,
f: 'OPEP2_20'
},
{
v: 34,
f: 'OPEP2_60'
},
{
v: 35,
f: 'OPEP2_X'
},
{
v: 36,
f: 'OPEP3_05'
},
{
v: 37,
f: 'OPEP3_10'
},
{
v: 38,
f: 'OPEP3_20'
},
{
v: 39,
f: 'OPEP3_60'
},
{
v: 40,
f: 'OPEP3_X'
},
{
v: 41,
f: 'AA1'
},
{
v: 42,
f: 'AA2_05'
},
{
v: 43,
f: 'AA2_10'
},
{
v: 44,
f: 'AA2_20'
},
{
v: 45,
f: 'AA2_60'
},
{
v: 46,
f: 'AA2_X'
},
{
v: 47,
f: 'AA3_05'
},
{
v: 48,
f: 'AA3_10'
},
{
v: 49,
f: 'AA3_20'
},
{
v: 50,
f: 'AA3_60'
},
{
v: 51,
f: 'AA3_X'
}
]
},
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: Valores.length,
min: 0,
},
gridlines: {
count: Valores.length,
color: 'rgb(227, 225, 225)',
},
textStyle: {
fontSize: 12
},
ticks: [{
v: 1,
f: 'BVN'
},
{
v: 2,
f: 'LTOTALC1'
},
{
v: 3,
f: 'LUISAI1'
},
{
v: 4,
f: 'CORAREI1'
},
{
v: 5,
f: 'CORAREC1'
},
{
v: 6,
f: 'CONTINC1'
},
{
v: 7,
f: 'MILENIC1'
},
{
v: 8,
f: 'ORCL'
},
{
v: 9,
f: 'YHOO'
},
{
v: 10,
f: 'COFIINC1'
}
]
},
'width': 3900,
'height': 1000
};
//dtd
var customer_product_grid_data_table = new google.visualization.DataTable();
customer_product_grid_data_table.addColumn('string', 'Alarma & Valor');
customer_product_grid_data_table.addColumn('number', 'Alarma');
customer_product_grid_data_table.addColumn('number', 'Valor');
customer_product_grid_data_table.addColumn('number', 'Nivel de Alerta');
customer_product_grid_data_table.addColumn('number', 'Cantidad de alarmas');
customer_product_grid_data_table.addColumn('date', 'Fecha Inicio');
customer_product_grid_data_table.addColumn('date', 'Fecha Termino');
for (var j = 1; j < Valores.length; j++)
for (var i = 1; i < Alarmas.length; i++) {
var variable1 = Math.round(Math.random() * (10 - 1) + 1);
customer_product_grid_data_table.addRow([
'' + variable1, i, j, variable1, variable1, new Date(2016, 06, 1), new Date(2016, 06, 30)
]);
}
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(customer_product_grid_data_table, options);
}<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.js"></script>
</head>
<body>
<div id="chart_div"></div>
<div id="piechart" style="overflow-y: auto;white-space: nowrap; min-height:1200px;"></div>
</body>
</html>
的例子是冷静，只是有一个问题，查询： 1）当我移动ControlWrapper的范围内，我可以把它也移动ChartWrapper ？由于我打算缩小ControlWrapper，并在移动范围时自动移动ChartWrapper。 2）为什么当范围很小的ControlWrapper，我把它滑到一个空的部分我得到的错误：无法读取属性'0'的空ControlWrapper，我不知道它应该是什么。 在此先感谢您的回复和帮助 –