5

凡例で関連するキーをクリックしたときに、折れ線グラフの線を表示/非表示できるようにしたいのですが、これは可能ですか?

4

3 に答える 3

3

GWT Visualization LineChartで表示線を非表示にするには、次の手順に従います。-

1.既存のDataTableオブジェクトに基づいてDataViewオブジェクトを作成します。

DataTable dataTable = DataTable.create();
DataView dataView = DataView.create(dataTable);

2.DataViewで非表示にする曲線/線の列を非表示にします。

dataView.hideColumns(new int[]{<id_of_the_column>});

3. DataViewに基づいて、グラフ全体を再度描画します。

chart.draw(dataView, getOptions());

ここに注意点があります。ステップ3はコストのかかるステップであり、私たちにとっては20〜30秒近くかかります。新しいグラフが描画されます。ただし、データが大きくない場合は、コンテキストで管理できる必要があります。

注：チェックボックスを使用して独自の凡例を作成し、ユーザーがチェックボックスをオン/オフにするときに上記の操作を行う必要があります。

于 2012-04-29T17:04:46.240 に答える
2

スケーリングとアニメーションを含める必要がない場合、1 つのオプションは、lineWidth と areaOpacity の値を使用してデータを非表示にすることです。

 <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>

    <script>
        function updateTable() {

            // quick data - cleaned up for this example real data sources
            data = new Array();
            data[0] = new Array();
            data[0][0] = "Day";
            data[0][1] = "Metric 1";
            data[0][2] = "Metric 2";
            data[0][3] = "Metric 3";
            data[1] = new Array();
            data[1][0] = 1;
            data[1][1] = 200;
            data[1][2] = 50;
            data[1][3] = 400;
            data[2] = new Array();
            data[2][0] = 2;
            data[2][1] = 440;
            data[2][2] = 140;
            data[2][3] = 40;
            data[3] = new Array();
            data[3][0] = 3;
            data[3][1] = 300;
            data[3][2] = 500;
            data[3][3] = 600;

            var gdata = google.visualization.arrayToDataTable(data);

            var options = {
              // title: 'kala',
              hAxis: {title: 'Days',  titleTextStyle: {color: '#333'}}
              ,vAxis: {minValue: 0}
              ,height: 300
              ,width: 600
              ,chartArea: {left: 60}
              ,lineWidth: 2
              ,series: {0:{color: 'black', areaOpacity: 0.3, lineWidth: 2}
              ,1:{color: 'red', areaOpacity: 0.3, lineWidth: 2}
              ,2:{color: 'purple', areaOpacity: 0.3, lineWidth: 2}}
            };

            var chart = new google.visualization.AreaChart(document.getElementById('my_chart'));
            chart.draw(gdata, options);

            google.visualization.events.addListener(chart, 
                'select', 
                (function (x) { return function () { AreaSelectHander(chart, gdata, options)}})(1));

    }

    function AreaSelectHander(chart, gdata, options) {
        // when ever clicked we enter here 
        // more code needed to inspect what actually was clicked, now assuming people
        // play nicely and click only lables...
        var selection = chart.getSelection();       
        var view = new google.visualization.DataView(gdata);
        console.log(options);

        // click and data index are one off
        i = selection[0].column - 1;

        // just simple reverse
        if (options.series[i].lineWidth == 0) {
            options.series[i].lineWidth = 2;
            options.series[i].areaOpacity = 0.3;
        }
        else {
            options.series[i].lineWidth = 0;
            options.series[i].areaOpacity = 0.0;            
        }

        chart.draw(gdata, options);
    }
    </script>

    <script type='text/javascript'>
        google.load('visualization', '1', {packages:['table', 'corechart']});
        google.setOnLoadCallback(updateTable);
    </script>

</head>

<body>
    <div id='my_chart'></div>
</body>

于 2013-12-08T21:20:02.063 に答える