Легенда Google Chart нажмите для скрытия столбца

Я новичок в javascript и пытаюсь использовать googlecharts. Теперь у меня проблема с исходным столбцом. Теперь я могу скрыть нужный столбец, но когда я переключаюсь между скрытием и отображением, исходный столбец больше не отображается.

<html>   <head>    <script type = "text/javascript"    src = "https://www.gstatic.com/charts/loader.js"></script>   <script    type = "text/javascript">    google.charts.load("current", {packages:['corechart']});    google.charts.setOnLoadCallback(drawChart);    function drawChart() {
         var data = google.visualization.arrayToDataTable([
           ['Year', 'Sales', 'Expenses'],
         ['2004', 1000, 400],
         ['2005', 1170, 460],
         ['2006', 660, 1120],
         ['2007', 1030, 540]
         ]);

         var view = new google.visualization.DataView(data);
         view.setColumns([  0,
                            1,{ calc: "stringify",sourceColumn: 1,type: "string",role: "annotation" },
                            2,{ calc: "stringify",sourceColumn: 2,type: "string",role: "annotation" }]);




         var options = {
           title: "Density of Precious Metals, in g/cm^3",
           width: 600,
           height: 400,
           bar: {groupWidth: "95%"},
           legend: { position: "/" },
         };
         var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
         chart.draw(view, options);
              console.info(view); 
              var columns = [];         var series = {};        for (var i = 0; i < data.getNumberOfColumns(); i++) {           columns.push(i);            if (i > 0) {
                    series[i - 1] = {};             }       }
                    google.visualization.events.addListener(chart, 'select', function () {          var sel = chart.getSelection();             // if selection    length is 0, we deselected an element            if (sel.length > 0) {
                    // if row is undefined, we clicked on the legend
                    if (sel[0].row === null) {
                        var col = sel[0].column;
                        if (columns[col] == col) {
                            // hide the data series
                            columns[col] = {
                                label: data.getColumnLabel(col),
                                type: data.getColumnType(col),
                                calc: function () {

                                    return null;
                                },

                            };

                            // grey out the legend entry
                            series[col - 1].color = '#CCCCCC';
                        }
                        else {
                            // show the data series
                            columns[col] = col;
                            series[col - 1].color = null;
                        }
                        var view = new google.visualization.DataView(data);
                        view.setColumns(columns);
                        console.info(view);
                        chart.draw(view, options);
                    }           }       });







             }   </script>   </head>   <body>    <div id = "columnchart_values" style = "width: 900px; height: 500px;"></div>   </body> </html>

Это мой код SouceCode - https://jsfiddle.net/vpz2a4nc/

Помогите, пожалуйста.

javascript charts google-visualization

06.11.2018 03:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 519

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы используете data для создания столбцов,
но с использованием view для начального розыгрыша. data не включает столбцы аннотаций, только view.
поэтому индексы столбцов не выравниваются, когда один из них скрыт.

простое решение - преобразовать представление в таблицу данных,
и замените data перед первым рисованием.

var view = new google.visualization.DataView(data);
view.setColumns([0,
  1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
  2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}
]);
data = view.toDataTable();

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

google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0,
    1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
    2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}
  ]);
  data = view.toDataTable();

  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: "95%"},
    legend: { position: "/" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(data, options);

  var columns = [];
  var series = {};
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    columns.push(i);
    if (i > 0) {
      series[i - 1] = {};
    }
  }

  google.visualization.events.addListener(chart, 'select', function () {
    var sel = chart.getSelection();
    // if selection length is 0, we deselected an element
    if (sel.length > 0) {
      // if row is undefined, we clicked on the legend
      if (sel[0].row === null) {
        var col = sel[0].column;
        if (columns[col] == col) {
          // hide the data series
          columns[col] = {
            label: data.getColumnLabel(col),
            type: data.getColumnType(col),
            calc: function () {
              return null;
            },
          };

          // grey out the legend entry
          series[col - 1].color = '#CCCCCC';
        }
        else {
          // show the data series
          columns[col] = col;
          series[col - 1].color = null;
        }
        var view = new google.visualization.DataView(data);
        view.setColumns(columns);
        chart.draw(view, options);
      }
    }
  });
}

<script src = "https://www.gstatic.com/charts/loader.js"></script>
<div id = "columnchart_values" style = "width: 900px; height: 500px;"></div>

Да, это очень, очень, очень полезно. Спасибо, мистер или мистер Уайтхэт.

— 07.11.2018 02:54

06.11.2018 13:39

Другие вопросы по теме

Как установить интервалы графика как определенные точки?

Неправильная позиция метки диаграммы Winform

Как правильно установить значения оси X для диаграммы D3

Диаграмма остается белой с Google Charts API

Гистограмма mpandroid диаграмма

В чем разница между Dash и Plotly?

Добавление средних линий для каждого plt.plot в matplotlib?

Может ли кто-нибудь сказать мне, почему моя гистограмма d3 не отображается?

Сгруппированная панель MPAndroidChart не начинается с левой стороны

MPAndroidChart CombinedChart CandleStick реальное тело не отображается

Легенда Google Chart нажмите для скрытия столбца

Ответы 1

Другие вопросы по теме

Похожие вопросы