Question

我正在使用谷歌图表绘制图表。我是UI开发的新手。 JavaScript的。我已经看过互联网＆amp;设法让图表继续下去。我需要做以下

1）我有一个包含9个系列的折线图。当我将鼠标悬停在任何一个系列上时，我喜欢其他系列变暗

2）文我将鼠标移开，原来的样子应该恢复到图形中。

我能够找到主要用于高箱的例子。我正努力为谷歌图表实现类似的功能。我可以请求帮助来实现这个吗？

这是我绘制图表的代码。

        <script type="text/javascript">
            window.onresize = function(){
                startDrawingChart();
            };

            window.onload = function(){
                startDrawingChart();
            };

             startDrawingChart = function(){
                // Load the Visualization API AND the piechart package.
                google.load("visualization", "1", {packages:["corechart"],callback: drawChart});

                function drawChart() {
                    // Create our data table out of JSON data loaded FROM server.
                    var data_1 = google.visualization.arrayToDataTable([<?php echo (implode(",", $array_0)); ?>]);


                    var options_line = {
                        chartArea: {
                            left: 70,
                            top: 61,
                            width: '95%',
                            height: '60%'
                        },
                        curveType: 'function',
                        //width: 1600,
                        height: 400,
                        pointSize: 4,
                        lineWidth: 2,
                        visibleInLegend: false,
                        vAxis: {
                            //title: "GC#",
                            //logScale: true,
                            titleTextStyle: {
                                color: 'black'
                            }
                        },
                        hAxis: {
                            title: "TIMELINE",
                            titleTextStyle: {
                                bold: false,
                                color: 'black'
                            }
                        },
                        legend: {
                            position: 'top',
                            alignment: 'center',
                            textStyle: {
                                color: 'blue'
                            },
                            is3D: true
                        },
                        series: {5: {type: "line"}},
                    };

{position: 'top', alignment: 'center'},
                        bar: {groupWidth: '3%'},
                        is3D: true
                    };

                    var chart_1 = new google.visualization.ComboChart(document.getElementById('plot1'));
                    chart_1.draw(data_1, options_line);
                }
            };
        </script>

Answer 1

如果点击图表，这很容易。只需使用select事件并将所有其他系列的颜色更改为较浅的阴影。如果你有兴趣我可以写一个答案，但你的问题指定悬停。

你可以使用像this completely different situation这样的CSS选择器，但是用直接的CSS编写它会非常复杂。我真的不知道LESS，SASS，SCSS或COMPASS能够说这些工具是否会让它变得更容易，但它们可能会这样。

我会采用将悬停选择器放在改变构成所有系列的SVG元素颜色的整个事物上的方法，然后编写一个更具体的规则，将您的悬停系列设置恢复正常。 / p>

根据我的经验，对谷歌图表进行视觉上的更改并不是作为图表功能实现的，因为他们不会在任何内容上放置任何ID或类。因此，您可以使用CSS或jQuery选择器来尝试查找图表的各个部分 - 使用颜色似乎是区分SVG元素从系列到系列的有效方法 - 但是您可能会得到误报或错过动态元素图表。不断变化使他们难以测试。

谷歌图表 - 除了鼠标悬停之外的所有其他系列

1 个答案: