Question

我有一个加载Google图表的asp.net页面。图表加载正常。我可以通过拖动鼠标来放大。

我也可以单击一个图例以显示或隐藏系列。问题是，一旦我单击其中一个图例以隐藏或显示它，使用鼠标放大功能就消失了，为什么？

我的HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="scripts/jScore.js"></script>

<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart', 'table'] });
</script>

</head>
<body>
<div id="chartScore" style="height:1000px"></div>
</body>
</html>

我的JS文件

var MyData = {};

$(document).ready(function () {

$.ajax({
    type: 'GET',
    url: 'api/Score',
    dataType: 'json',
    success: function (data) {
        MyData.dataValues = data;
        PopulateData();
        DrawChartScores();
    },
    error: function () {
        alert("Error loading data! Please try again");
    }
});

};


var Data = {};

function PopulateData() {

Data = {
    displayed: [...MyData.dataValues],
    hidden: Object.keys(MyData.dataValues[0]).reduce((a, c) => {
        a[c] = false;
        return a;
    }, {}),
    map: Object.keys(MyData.dataValues[0])
};
}

function DrawChartScores() {

 var dataValues = MyData.dataValues;
 var data = new google.visualization.DataTable();
 var options = {
    title: 'Scores', width: '80%', height: '80%',
    explorer:
        {
            keepInBounds: true,
            actions: ['dragToZoom', 'rightClickToReset']
        },
    series: Data.map.reduce((a, c, i) => {
        a[i] = {};
        return a;
    }, {})
  };

data.addColumn('date', 'Day');
data.addColumn('number', 'A');
data.addColumn('number', 'B');
data.addColumn('number', 'C');
data.addColumn('number', 'D');
data.addColumn('number', 'E');
data.addColumn('number', 'F');
data.addColumn('number', 'Nrs');

// add data
for (var i = 0; i < dataValues.length; i++) {
    data.addRow([new Date(dataValues[i].DateRet), dataValues[i].A, dataValues[i].B, dataValues[i].C,
        dataValues[i].D, dataValues[i].E, dataValues[i].F, dataValues[i].Nrs]);
}

var chart = new google.visualization.AreaChart(document.getElementById('chartScore'));
var last = {
    column: true,
    row: true
  };

 function showHideSeries() {
    var sel = chart.getSelection();

    if (sel.length === 0 && last.row === null) {
        Data.hidden[Data.map[last.column]] = !Data.hidden[Data.map[last.column]];
    } else if (sel.length && sel[0].row === null) {
        // toggle the current item selected
        Data.hidden[Data.map[sel[0].column]] = !Data.hidden[Data.map[sel[0].column]];
        last = sel[0];
    } else {
        return;
    }

    vparse(data);
    options = vkillLegend(options);
    chart.draw(data, options);

   };

google.visualization.events.addListener(chart, 'select', showHideSeries);
chart.draw(data, options);

};

function vparse(data) {
 Data.displayed.reduce((a, c, i) => {
    for (let k in c) {
        if (k === "DateRet") continue;
        if (Data.hidden[k])
            data.setValue(i, Data.map.indexOf(k), null);
        else
            data.setValue(i, Data.map.indexOf(k), c[k]);
    }
    return true;
}, []);
return data;
}

function vkillLegend(options) {
 options.series = Object.keys(options.series).reduce((a, c, i) => {
    let current = {};
    if (Data.hidden[Data.map[i]]) current.color = "#CCCCCC";
    else c.color = null;
    a[i - 1] = current;
    return a;
}, {});
return options;
};

单击图例以隐藏/显示系列后，Google图表无法再放大

0 个答案: