那些遇到过的问题

通过单击图例打开和关闭一系列谷歌图表

mHe*_*pMe 2 javascript jquery google-api google-visualization

我有一个包含 6 个系列的面积图。我希望用户能够单击图例来切换系列的可见性。

我找到了这个示例并尝试将其包含在下面的代码中，但没有任何反应。在添加此代码之前，如果我单击图例中的其中一个系列，该系列会变得更厚，然后再次单击它，它将恢复正常，相信这是一些默认行为。然而，一旦系列变得更厚，包含此代码我就无法执行任何操作，即缩放或单击图表来获取点的值。

不确定我错过了什么？

更新

我也尝试过关注这篇文章，但结果相同。

最新更新

我已将代码更改为以下内容。

我现在收到的错误如下......

未捕获错误：列索引 8 无效。应该是 [0-7] 范围内的整数。在 gvjs_en (jsapi_compiled_default_module.js:75) 在 gvjs_P.gvjs_.uc (jsapi_compiled_default_module.js:92) 在 gvjs_P.gvjs_.Za (jsapi_compiled_default_module.js:91) 在 Data.displayed.reduce (jScore.js:220) 在数组.reduce () 在 vparse (jScore.js:214) 在 showHideSeries (jScore.js:202) 在 gvjs_Zn。(jsapi_compiled_default_module.js:179) 在 gvjs__n (jsapi_compiled_default_module.js:129) 在 gvjs_Zn.gvjs_.dispatchEvent (jsapi_compiled_default_module.js:127)

我的 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>
Run Code Online (Sandbox Code Playgroud)

我的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;
};
Run Code Online (Sandbox Code Playgroud)

Der*_*ard 5

底部有说明，这是工作代码：

// jshint esnext: true
google.charts.load('current', {'packages': ['corechart', 'table']});


var dataValues = [{DateScore: '2018-6-14', A: 1000, B: 900, C: 800, D: 700, E: 600, F: 500, NrS: 400, }, {DateScore: '2018-6-15', A: 1000, B: 900, C: 800, D: 700, E: 600, F: 500, NrS: 400, }, {DateScore: '2018-6-17', A: 1000, B: 900, C: 800, D: 700, E: 600, F: 500, NrS: 400, }, {DateScore: '2018-6-22', A: 800, B: 600, C: 1000, D: 900, E: 300, F: 100, NrS: 600, } ];

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


google.charts.setOnLoadCallback(DrawChartScores);

function DrawChartScores() {

    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');

    for (var i = 0; i < dataValues.length; i++) {
        let newRow = Object.values(dataValues[i]);
        newRow[0] = new Date(newRow[0]);
        data.addRow(newRow);
    }

    var chart = new google.visualization.AreaChart(document.getElementById('chartP'));
    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 === "DateScore") 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;
}
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html>

<head>
    <title>My Title</title>
    <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>

</head>

<body>
    <div id="chartP" style="height:1000px"></div>
</body>
Run Code Online (Sandbox Code Playgroud)

解释

变量

  • Data目的：
    • displayed- 包含所有提供的起始数据的数组dataValues
    • hidden- 使用将列键映射到其显示的布尔表示的简单对象来跟踪已隐藏的图例项
    • map- 只是一个数组，其中项目的索引是图表上的位置，也用于将列索引转换为列键
  • options.series- 每列的对象表示；这用于在单击时修改图例颜色。
  • last- 这更是谷歌图表事件处理的产物；本质上，如果您单击同一事物两次，第二次单击将不会注册来自 的任何数据getSelection()。这意味着如果我们想要用户友好的体验，就必须存储之前的所有点击。否则，用户必须先单击图表上的其他位置，然后再单击返回图例项。

功能

单击图例项时，会发生一些事情：

  1. showHideSeries()决定单击是否在图例上，如果是在图例上，则执行相应操作 - 无论选择是否为空；
  2. vparse()根据中提供的基础数据准备新数据集dataValues
  3. vkillLegend()取消数据集中不再存在的图例项的样式，并恢复重新添加的数据的样式；
  4. 最后，我们准备将所有更改推送到图表中，我们可以使用chart.draw()

您可以通过单击上面的按钮查看工作示例Run code snippet。

我希望这有帮助！

归档时间：

查看次数：

3184 次

最近记录：

7 年，5 月 前
Google Charts API:在图例上显示/隐藏系列点击.怎么样？ 8
更多相关链接
相关归档
地图拼贴算法 153
jQuery - 从textarea中选择所有文本 127
使用JavaScript检查服务器上是否存在图像？ 111
javascript jquery单选按钮单击 85
在javascript中捕获ctrl + z组合键 65
箭头功能是否比v8中的普通独立功能声明更快(更高性能,更轻)？ 45
如何在会话超时时关闭所有活动的引导程序模式？ 41
使用jQuery在图像上"绘制"简单线条并保存到Rails DB的最简单方法？ 24
jQuery:选择和操作DOM之外的html元素 21
jquery数据属性删除前导零 17
难疑归档
如何更改远程Git存储库的URI(URL)？ 3529
#include <filename>和#include"filename"有什么区别？ 2204
什么是尾递归？ 1602
使用jQuery将表单数据转换为JavaScript对象 1580
在Git中撤消一个文件的工作副本修改？ 1550
如何递归计算目录中的所有代码行？ 1536
从Git提交中删除文件 1484
"javascript:void(0)"是什么意思？ 1292
如何查看仅一个用户提交的git日志？ 1178
require,include,require_once和include_once之间的区别？ 1166