можно добавить 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>


person Ronny Jair Ruiz Andia    schedule 27.07.2017    source источник


Ответы (1)


вы можете связать ChartRangeFilter с любым типом диаграммы,
в любом случае фильтр в основном работает с таблицей данных...

столбец, который будет отфильтрован, должен представлять непрерывную ось,
тип данных должен быть --> 'number', 'date', 'timeofday' и т. д.
не может быть --> 'string'

поскольку BubbleChart требует 'string' для первого столбца,
используйте параметр chartView для ChartRangeFilter,
чтобы указать, о каких столбцах таблицы данных он должен знать...

var control = new google.visualization.ControlWrapper({
  controlType: 'ChartRangeFilter',
  containerId: 'control',
  options: {
    filterColumnIndex: 1,  // <-- x-axis column
    ui: {
      chartType: 'ScatterChart',
      chartView: {
        columns: [1, 2]  // <-- limit columns from data table
      },
      chartOptions: {
        width: 3900
      }
    }
  }
});

см. следующий рабочий фрагмент...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart', 'controls']
});

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 dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  var chart = new google.visualization.ChartWrapper({
    chartType: 'BubbleChart',
    containerId: 'chart',
    options: options
  });

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    options: {
      filterColumnIndex: 1,
      ui: {
        chartType: 'ScatterChart',
        chartView: {
          columns: [1, 2]
        },
        chartOptions: {
          width: 3900
        }
      }
    }
  });

  dashboard.bind(control, chart);
  dashboard.draw(customer_product_grid_data_table);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="chart"></div>
  <div id="control"></div>
</div>

person WhiteHat    schedule 28.07.2017
comment
Пример классный, просто есть вопрос и запрос: 1) Когда я перемещаю диапазон ControlWrapper, могу ли я заставить его также перемещать ChartWrapper? Поскольку я намерен сжимать ControlWrapper и при перемещении диапазона автоматически перемещать ChartWrapper. 2) Почему, когда диапазон ControlWrapper мал и я подсовываю его за пустую часть, я получаю ошибку: Не могу прочитать свойство '0' null ControlWrapper и я не знаю, что это должно быть. Заранее спасибо за ответ и за большую помощь - person Ronny Jair Ruiz Andia; 31.07.2017