Question

我在使用ng2-google-charts时遇到了一些不受欢迎的行为。我能够动态添加移动平均线，VWAP，RSI和其他功能。我也可以使用@ViewChild（）访问ChartWrapper。但是，当使用rangeFilter时，它会将ComboChart中的移动平均值添加到rangeFilter，这看起来很荒谬。它也迫使我添加dataTable中的所有列，或者只是抛出一个错误告诉我列缺失。我要显示的只是日期范围。有没有办法用ComboChart做到这一点？我检查了文档，并指出我应该能够在ChartWrapper的视图中使用columns属性指定它。但是，这不起作用。任何帮助将不胜感激。先谢谢你们。

     const rangeFilter = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'cchart',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    chartArea: {
                        width: '90%',
                        backgroundColor: '#e5e5e5'
                    }
                },
                minRangeSize: 60000,
                snapToData: true
            }
        },
        view: {
            columns: [0, 1, 2, 3, 4]
        },
        state: {
            range: {
                start: startDate,
                end: endDate
            }
        }
    });

    if (document.getElementById('cchart')) {
        const dash = new google.visualization.Dashboard(document.getElementById('dashboard1'));
        const googleChartWrapper = this.schart.wrapper;
        dash.bind([rangeFilter], [googleChartWrapper]);
        dash.draw(data);
    }

Answer 1

我可以通过在ChartRangeFilter中设置系列来实现此功能，如下所示。

getDateRangeFilter(cid: string, startDate: Date, endDate: Date): any {
    return new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: cid,
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    background: '#e5e5e5',
                    chartArea: {
                        backgroundColor: '#e5e5e5',
                        width: '98%',
                    },
                    series: {
                        0: { type: 'line', color: 'transparent' },
                        1: { type: 'line', color: 'transparent' },
                        2: { type: 'line', color: 'transparent'  },
                        3: { type: 'line', color: 'transparent' },
                        4: { type: 'line', color: 'transparent' },
                        5: { type: 'line', color: 'transparent' }
                    }

                },
                snapToData: true,
                hAxis: {
                    minValue: startDate,
                    maxValue: endDate
                  }
            }
        },
        view: [0],
        state: {
            range: {
                start: startDate,
                end: endDate
            }
        }
    });
}

还值得注意的是，如果您使用带有烛台的ComboChart并且您从几天到几分钟导航，那么您的日期需要使用以下设置：

processMinuteHeikenAshiChart(target, haLow, haOpen, haClose, haHigh, date, mvg, mvgx, vwap): any[] {
    const arrData = [];
    //include minutes and seconds
    const ndate = new Date(Date.UTC(date.getYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), 0, 0));
    arrData.push(ndate);
    arrData.push(haLow);
    arrData.push(haOpen);
    arrData.push(haClose);
    arrData.push(haHigh);

    switch (target) {
        case 'short':
            if (this.securityService.shortChartOptions.value.useSMA1) { arrData.push(mvg); }
            if (this.securityService.shortChartOptions.value.useSMA2) { arrData.push(mvgx); }
            if (this.securityService.shortChartOptions.value.showVWAP) { arrData.push(vwap); }
            break;
        case 'long':
            if (this.securityService.longChartOptions.value.useSMA1) { arrData.push(mvg); }
            if (this.securityService.longChartOptions.value.useSMA2) { arrData.push(mvgx); }
            if (this.securityService.longChartOptions.value.showVWAP) { arrData.push(vwap); }
    }

    return arrData;
}

rangeFilter添加不需要的列ng2-google-charts

1 个答案: