javascript - 谷歌图表，平均线删除了我的另一条线

Question

我有一个 Google 组合图，其中一个值作为条形，一个值作为线条，我还想要一条线来显示条形值的平均值，所以我找到了可以做到这一点的代码，但是，当实现了我的另一条线消失了。

这是我之前的图表的样子。

这是在我实现平均线之后，我的另一条线消失了。

我不知道该怎么做才能让它们都显示出来？

这行似乎与所有这些有关，将 dv 更改回 data 将显示我的图表在第一张图片上的样子，但我猜我还需要更改一些东西才能使其正常工作吗？

chart.draw(dv, options);

这是代码。

<script>
    google.charts.load('current', {
        'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawVisualization);


    function drawVisualization() {
        var data = google.visualization.arrayToDataTable([
            ['Day', 'Repetitions', 'Sets'],
            @foreach (var c in db.Query(Query, inputDate, endDate, baselift))
            {
                var totAvg = c.avg;
                var allReps = c.reps;
                var realAvg = (totAvg / allReps) * 100;

                //Writes out the data that will be shown in the chart.
                <text>['@c.date', @c.reps, @c.sets],</text>
            }
        ]);

            // Create a DataView that adds another column which is all the same (empty-string) to be able to aggregate on.
            var viewWithKey = new google.visualization.DataView(data);
                    viewWithKey.setColumns([0, 1, {
                        type: 'string',
                        label: '',
                        calc: function (d, r) {
                            return ''
                        }
                    }])

                    // Aggregate the previous view to calculate the average. This table should be a single table that looks like:
                    // [['', AVERAGE]], so you can get the Average with .getValue(0,1)
                    var group = google.visualization.data.group(viewWithKey, [2], [{
                        column: 1,
                        id: 'avg',
                        label: 'Average',
                        aggregation: google.visualization.data.avg,
                        'type': 'number'
                    }]);

                    // Create a DataView where the third column is the average.
                    var dv = new google.visualization.DataView(data);
                    dv.setColumns([0, 1, {
                        type: 'number',
                        label: 'Average',
                        calc: function (dt, row) {
                            return group.getValue(0, 1);
                        }
                    }]);

                    var options = {                            
                        title: 'Daily Repetition Statistics',
                        backgroundColor: { fill: 'transparent' },
                        explorer: { axis: 'horizontal' },
                        vAxes: {

                            0: { logScale: false, viewWindow: { min: 0 } },
                            1: { logScale: false, maxValue: 2 }

                        },
                        hAxis: { title: 'Day' },
                        seriesType: 'bars',
                        curveType: 'function',
                        series: {
                        0: {
                               targetAxisIndex: 0,
                               color: 'orange'                                       
                           },
                        1: { targetAxisIndex: 1 },
                        1: { targetAxisIndex: 1, type: "line" },
                        2: { targetAxisIndex: 1, type: "line" }
                    }
                };

                var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
                chart.draw(dv, options);
                }
            </script>

Answer 1

'sets' 的列索引未提供给 setColumns

改变这个...

var dv = new google.visualization.DataView(data);
dv.setColumns([0, 1, {
    type: 'number',
    label: 'Average',
    calc: function (dt, row) {
        return group.getValue(0, 1);
    }
}]);

到..

var dv = new google.visualization.DataView(data);
dv.setColumns([0, 1, 2, {  // <-- add 'sets' column index 2
    type: 'number',
    label: 'Average',
    calc: function (dt, row) {
        return group.getValue(0, 1);
    }
}]);