Question

刚开始使用Angular。我需要将Google图表合并到Angular应用中。找到了this plunk（代码在下面的代码段中发布），说明了如何在指令中使用Google Charts：

<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>
        Google Chart Tools AngularJS Directive Example
    </title>
</head>
<body ng-app="google-chart-example" ng-controller="MainCtrl">
<h1>Google Chart Tools AngularJS Directive Example</h1>
<p>This is probably the most simple example you can get.  It
  just shows you what you need to get the Google Chart Tools AngularJS Directive to work.
</p>

<div>
<div google-chart chart="chart" style="{{chart.cssStyle}}"/>
</div>

<p>
  Here are the steps:
  <ol>
    <li>Download <a href="https://raw.github.com/bouil/angular-google-chart/gh-pages/ng-google-chart.js">ng-google-chart.js from github</a> and add a script tag to your html.</li>
    <li>Create a div like: <b><pre ng-non-bindable> &lt;div google-chart chart=&quot;chart&quot; style=&quot;{{chart.cssStyle}}&quot;/&gt;</pre></b></li>
    <li>Add 'googlechart' to your module like this: <b><pre>angular.module('myApp',[ 'googlechart', ...</pre></b></li>
    <li>Populate the <b>$scope.chart</b> like this:</li>
  </ol>
  <pre>{{chart | json}}</pre>
</p>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<script src="example.js"></script>
</body>
</html>

我的一个要求是允许用户通过点击相应的图例或以类似的方式打开和关闭单个图表系列的可见性。

我还发现这个JSFiddle example在Angular外部打开和关闭可见性：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y1');
    data.addColumn('number', 'y2');
    data.addColumn('number', 'y3');
    // add random data
    var y1 = 50, y2 = 50, y3 = 50;
    for (var i = 0; i < 100; i++) {
        y1 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        y2 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        y3 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        data.addRow([i, y1, y2, y3]);
    }
    
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    
    // create columns array
    var columns = [];
    // display these data series by default
    var defaultSeries = [1, 3];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
        if (i == 0 || defaultSeries.indexOf(i) > -1) {
            // if the column is the domain column or in the default list, display the series
            columns.push(i);
        }
        else {
            // otherwise, hide it
            columns.push({
                label: data.getColumnLabel(i),
                type: data.getColumnType(i),
                sourceColumn: i,
                calc: function () {
                    return null;
                }
            });
        }
        if (i > 0) {
            columns.push({
                calc: 'stringify',
                sourceColumn: i,
                type: 'string',
                role: 'annotation'
            });
            // set the default series option
            series[i - 1] = {};
            if (defaultSeries.indexOf(i) == -1) {
                // backup the default color (if set)
                if (typeof(series[i - 1].color) !== 'undefined') {
                    series[i - 1].backupColor = series[i - 1].color;
                }
                series[i - 1].color = '#CCCCCC';
            }
        }
    }
    
    var options = {
        width: 600,
        height: 400,
        series: series
    }
    
    function showHideSeries () {
        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 (typeof(columns[col]) == 'number') {
                    var src = columns[col];
                    
                    // hide the data series
                    columns[col] = {
                        label: data.getColumnLabel(src),
                        type: data.getColumnType(src),
                        sourceColumn: src,
                        calc: function () {
                            return null;
                        }
                    };
                    
                    // grey out the legend entry
                    series[src - 1].color = '#CCCCCC';
                }
                else {
                    var src = columns[col].sourceColumn;
                    
                    // show the data series
                    columns[col] = src;
                    series[src - 1].color = null;
                }
                var view = new google.visualization.DataView(data);
                view.setColumns(columns);
                chart.draw(view, options);
            }
        }
    }
    
    google.visualization.events.addListener(chart, 'select', showHideSeries);
    
    // create a view with the default columns
    var view = new google.visualization.DataView(data);
    view.setColumns(columns);
    chart.draw(view, options);
}

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="chart_div"></div>

<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to turn on or off data series by clicking on legend entries</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>

我对JavaScript非常缺乏经验，我不知道如何将两者结合起来，最终得到一个指令，其中包括这种可见性切换功能。如果有人知道这是怎么做的，我真的很感激。

在Angular指令中切换Google Chart系列

0 个答案: