javascript - 在 Google 图表(组合图表)中显示/隐藏线条/条形

Question

我想制作一个具有隐藏/显示功能的组合(线/条)图。我遇到的问题是我不知道如何指定索引更改(对于 javascript 来说是新的)这是我的示例(取消选中前两个复选框之一并重新选中它以查看问题): http://jsfiddle.net/cosnm3oe/

google.load("visualization", "1", {

packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Temperature', 'Humidity', 'Runs'],
    [new Date(2017, 3, 26, 14, 46), 80.8, 39.6, 0],
    [new Date(2017, 3, 26, 14, 51), 80.4, 40.3, 0],
    [new Date(2017, 3, 26, 14, 57), 79.9, 40.7, 0],
    [new Date(2017, 3, 26, 15, 2), 79.5, 41.1, 50],
    [new Date(2017, 3, 26, 15, 7), 79.2, 42.2, 50],
    [new Date(2017, 3, 26, 15, 12), 78.8, 42.1, 0],
    [new Date(2017, 3, 26, 15, 17), 78.6, 43.1, 50],
    [new Date(2017, 3, 26, 15, 22), 78.3, 43.2, 0]
  ]);
  var date_formatter = new google.visualization.DateFormat({
    pattern: "MMM dd, yyyy h:mm a"
  });
  date_formatter.format(data, 0);

  showEvery = 1;
  var seriesColors = ['red', 'blue', 'orange', 'green'];
  var options = {
    strictFirstColumnType: true,
    colors: seriesColors,
    width: '100%',
    height: '60%',
    'legend': {
      'position': 'top'
    },
    hAxis: {
      slantedTextAngle: 45,
      slantedText: true,
      showTextEvery: showEvery
    },
    vAxis: {
      viewWindowMode: 'explicit',
      viewWindow: {
        max: 90,
        min: 27.2
      }
    },
    textStyle: {
      fontName: 'Ariel',
      fontSize: 40,
      bold: false
    },
    interpolateNulls: false,
    seriesType: 'line',
    series: {
      2: {
        type: 'bars'
      }
    },
    chartArea: {
      left: 40,
      top: 20,
      width: "100%"
    }
  };

  var view = new google.visualization.DataView(data);
  var chart = new google.visualization.LineChart($('#chart_div')[0]);
  chart.draw(view, options);

  $('#series').find(':checkbox').change(function() {
    var cols = [0];
    var colors = [];
    $('#series').find(':checkbox:checked').each(function() {
      console.log(this);
      var value = parseInt($(this).attr('value'));
      cols.push(value);
      colors.push(seriesColors[value - 1]);
      console.log(value, 'colors: ', colors);
    });
    view.setColumns(cols);

    chart.draw(view, {
      strictFirstColumnType: true,
      series: {
        value: {
          type: 'bars'
        }
      },
      colors: colors,
      width: '100%',
      height: '60%',
      'legend': {
        'position': 'top'
      },
      hAxis: {
        slantedTextAngle: 45,
        slantedText: true,
        showTextEvery: showEvery
      },
      textStyle: {
        fontName: 'Ariel',
        fontSize: 40,
        bold: false
      },
      interpolateNulls: false,
      seriesType: 'line',
      series: {
        1: {
          type: 'bars'
        }
      },
      chartArea: {
        left: 40,
        top: 20,
        width: "100%"
      }
    });
  });

  google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      alert('selected series: ' + selection[0].column);
    }
  });

}

和 html:

<ul id="series" style="list-style: none">
  <label><input type="checkbox" name="series" value="1" checked="true" /> Temperature</label>
  <label><input type="checkbox" name="series" value="2" checked="true" /> Humidity</label>
  <label><input type="checkbox" name="series" value="3" checked="true" /> Runs</label>
</ul>
<div id="chart_div"></div>

谢谢!

Answer 1

看起来您希望'Runs'始终为'bars'

因此，当选择“运行”时，

将系列类型分配给最后一列/系列号

      if (value === 3) {
        options.series = {};
        options.series[cols.length - 2] = {type: 'bars'};
      }

请参阅以下工作片段...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Temperature', 'Humidity', 'Runs'],
    [new Date(2017, 3, 26, 14, 46), 80.8, 39.6, 0],
    [new Date(2017, 3, 26, 14, 51), 80.4, 40.3, 0],
    [new Date(2017, 3, 26, 14, 57), 79.9, 40.7, 0],
    [new Date(2017, 3, 26, 15, 2), 79.5, 41.1, 50],
    [new Date(2017, 3, 26, 15, 7), 79.2, 42.2, 50],
    [new Date(2017, 3, 26, 15, 12), 78.8, 42.1, 0],
    [new Date(2017, 3, 26, 15, 17), 78.6, 43.1, 50],
    [new Date(2017, 3, 26, 15, 22), 78.3, 43.2, 0]
  ]);
  var date_formatter = new google.visualization.DateFormat({
    pattern: "MMM dd, yyyy h:mm a"
  });
  date_formatter.format(data, 0);

  showEvery = 1;
  var seriesColors = ['red', 'blue', 'orange', 'green'];
  var options = {
    strictFirstColumnType: true,
    colors: seriesColors,
    width: '100%',
    height: '60%',
    'legend': {
      'position': 'top'
    },
    hAxis: {
      slantedTextAngle: 45,
      slantedText: true,
      showTextEvery: showEvery
    },
    vAxis: {
      viewWindowMode: 'explicit',
      viewWindow: {
        max: 90,
        min: 27.2
      }
    },
    textStyle: {
      fontName: 'Ariel',
      fontSize: 40,
      bold: false
    },
    interpolateNulls: false,
    seriesType: 'line',
    series: {
      2: {
        type: 'bars'
      }
    },
    chartArea: {
      left: 40,
      top: 20,
      width: "100%"
    }
  };

  var view = new google.visualization.DataView(data);
  var chart = new google.visualization.LineChart($('#chart_div')[0]);
  chart.draw(view, options);

  $('#series').find(':checkbox').change(function() {
    var cols = [0];
    var colors = [];
    options.series = null;
    $('#series').find(':checkbox:checked').each(function() {
      var value = parseInt($(this).attr('value'));
      cols.push(value);
      colors.push(seriesColors[value - 1]);
      if (value === 3) {
        options.series = {};
        options.series[cols.length - 2] = {type: 'bars'};
      }
    });
    view.setColumns(cols);
    options.colors = colors;
    chart.draw(view, options);
  });

  google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      alert('selected series: ' + selection[0].column);
    }
  });

}

<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul id="series" style="list-style: none">
  <label>
    <input type="checkbox" name="series" value="1" checked="true" /> Temperature</label>
  <label>
    <input type="checkbox" name="series" value="2" checked="true" /> Humidity</label>
  <label>
    <input type="checkbox" name="series" value="3" checked="true" /> Runs</label>
</ul>
<div id="chart_div"></div>