javascript - 谷歌图表 : How to avoid disappearing of annotations on each chart in dashboard control?

Question

google.load("visualization", "1", {packages: ["corechart", 'bar', 'Controls']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var chartsdata = new google.visualization.DataTable();
  chartsdata.addColumn('date', 'Datum');
  chartsdata.addColumn('number', 'TijdAfd1');
  chartsdata.addColumn({
    'type': 'string',
    'role': 'annotation'
  });
  chartsdata.addColumn('number', 'TijdAfd2');
  chartsdata.addColumn({
    'type': 'string',
    'role': 'annotation'
  });
  chartsdata.addColumn('number', 'TijdAfd3');
  chartsdata.addColumn({
    'type': 'string',
    'role': 'annotation'
  });

  chartsdata.addRows([
    [new Date('2017-05-29'), 56, '7,3m³', 42, '5,7m³', 59, '9524m³'],
    [new Date('2017-05-30'), 29, '3,8m³', 23, '3,1m³', 30, '4746m³'],
    [new Date('2017-05-31'), 53, '6,9m³', 13, '1,8m³', 60, '9522m³'],
    [new Date('2017-06-01'), 47, '6,1m³', 45, '6,2m³', 53, '8463m³'],
    [new Date('2017-06-02'), 69, '9,1m³', 48, '6,7m³', 66, '10502m³'],
    [new Date('2017-06-03'), 39, '5,1m³', 25, '3,4m³', 41, '6604m³'],
    [new Date('2017-06-04'), 51, '6,7m³', 44, '6,0m³', 43, '6800m³']
  ]);

  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));

  // Create a range slider, passing some options
  var ChartRangeFilter = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'filter_div',
    options: {
      //displayLabels: false,
      //displayAnnotations: false,
      tooltip: {
        isHtml: true
      },
      filterColumnLabel: 'Datum',
      ui: {
        chartOptions: {
          height: 55
        }
      }
    },
    // exclude annotation columns
    view: {
      columns: [0, 1, 3, 5]
    }
  });

  // Create a Column chart, passing some options
  var ColumnChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    options: {
      focusTarget: 'category',
      tooltip: {
        isHtml: true
      }
    }
  });

  // Establish dependencies, declaring that 'filter' drives 'ColumnChart',
  // so that the column chart will only display entries that are let through
  // given the chosen slider range.
  dashboard.bind(ChartRangeFilter, ColumnChart);

  // Draw the dashboard.
  dashboard.draw(chartsdata);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="dashboard_div">
  <!--Divs that will hold each control and chart-->
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>

我添加了一个仪表板控件并将 ChartRangeFilter 和 ColumnChart 绑定(bind)到它。如果我在 ChartRangeFilter 上配置 View 以排除用于注释的列，那么这些注释也会从我的 ColumnChart 中消失。在 ChartRangeFilter 上将 displayAnnotations 设置为 false 不会改变任何内容。

google.load("visualization", "1", { packages: ["corechart", 'bar', 'Controls'] });
google.setOnLoadCallback(drawChart);

function drawChart() {

    $.ajax({
        type: "POST",
        url: '@Url.Action("AjaxMethod", "AcuatorsRunTimes")',
        data: { StartDate: "@ViewData["StartDate"]", EndDate: "@ViewData["EndDate"]" },
        success: function (Data) {

            var data1 = new google.visualization.arrayToDataTable(Data);


            var chartsdata = new google.visualization.DataTable();
            chartsdata.addColumn('date', 'Datum');
            chartsdata.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });
            chartsdata.addColumn('number', 'TijdAfd1');
            //chartsdata.addColumn('string', "VolumeAfd1");
            chartsdata.addColumn({ 'type': 'string', 'role': 'annotation' });
            chartsdata.addColumn('number', 'TijdAfd2');
            //chartsdata.addColumn('string', "VolumeAfd2");
            chartsdata.addColumn({ 'type': 'string', 'role': 'annotation' });
            chartsdata.addColumn('number', 'TijdAfd3');
            //chartsdata.addColumn('string', "VolumeAfd3");
            chartsdata.addColumn({ 'type': 'string', 'role': 'annotation' });

            for (var i = 1; i < data1.getNumberOfRows(); i++) {

                var myDate = Date.parse(data1.getFormattedValue(i, 0));
                var titles = ['Afdeling 1', 'Afdeling 2', 'Afdeling 3'];
                var values = [data1.getFormattedValue(i, 4), data1.getFormattedValue(i, 5), data1.getFormattedValue(i, 6)];
                var Anno1 = data1.getFormattedValue(i, 7) + 'm³';
                var Anno2 = data1.getFormattedValue(i, 8) + 'm³';
                var Anno3 = data1.getFormattedValue(i, 9) + 'm³';
                chartsdata.addRow([new Date(myDate), HTMLtableRows(titles, values), parseInt(data1.getFormattedValue(i, 1)), Anno1, parseInt(data1.getFormattedValue(i, 2)), Anno2, parseInt(data1.getFormattedValue(i, 3)), Anno3]);
            }

            // Create a dashboard.
            var dashboard = new google.visualization.Dashboard(
                document.getElementById('dashboard_div'));

            // Create a range slider, passing some options
            var ChartRangeFilter = new google.visualization.ControlWrapper({
                controlType: 'ChartRangeFilter',
                containerId: 'filter_div',
                options: {
                    //displayLabels: false,
                    //displayAnnotations: false,
                    tooltip: { isHtml: true },
                    filterColumnLabel: 'Datum',
                    ui: {
                        chartType: 'LineChart',
                        chartOptions: {
                            height: 55
                        }
                    }
                }
            });

            // Create a column chart, passing some options
            var ColumnChart = new google.visualization.ChartWrapper({
                chartType: 'ColumnChart',
                containerId: 'chart_div',
                options: {
                    focusTarget: 'category',
                    tooltip: { isHtml: true }
                }
            });

            // Establish dependencies, declaring that 'filter' drives 'ColumnChart',
            // so that the column chart will only display entries that are let through
            // given the chosen slider range.
            dashboard.bind(ChartRangeFilter, ColumnChart);

            // Draw the dashboard.
            dashboard.draw(chartsdata);

        },
        failure: function (Data) {
            alert(Data.d);
        },
        error: function (Data) {
            alert(Data.d);
        }
    });
}

Result

Answer 1

包括数据表中用于绘制仪表板的注释列，

然后从过滤器的 view 属性中排除这些列...

var ChartRangeFilter = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'filter_div',
    options: {
        tooltip: { isHtml: true },
        filterColumnLabel: 'Datum',
        ui: {
            chartType: 'LineChart',
            chartOptions: {
                height: 55
            }
        }
    },
    // exclude annotation columns
    view: {
      columns: [0, 1, 2, 4, 6]
    }
});

编辑

通过使范围过滤器上的注释变得透明来隐藏它们，
将以下内容添加到 chartOptions...

          annotations: {
            highContrast: false,
            stem: {
              color: 'transparent',
              length: 0
            },
            textStyle: {
              color: 'transparent'
            }
          },

请参阅以下工作片段...

google.load("visualization", "1", {packages: ["corechart", 'bar', 'Controls']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var chartsdata = new google.visualization.DataTable();
  chartsdata.addColumn('date', 'Datum');
  chartsdata.addColumn('number', 'TijdAfd1');
  chartsdata.addColumn({
    'type': 'string',
    'role': 'annotation'
  });
  chartsdata.addColumn('number', 'TijdAfd2');
  chartsdata.addColumn({
    'type': 'string',
    'role': 'annotation'
  });
  chartsdata.addColumn('number', 'TijdAfd3');
  chartsdata.addColumn({
    'type': 'string',
    'role': 'annotation'
  });

  chartsdata.addRows([
    [new Date('2017-05-29'), 56, '7,3m³', 42, '5,7m³', 59, '9524m³'],
    [new Date('2017-05-30'), 29, '3,8m³', 23, '3,1m³', 30, '4746m³'],
    [new Date('2017-05-31'), 53, '6,9m³', 13, '1,8m³', 60, '9522m³'],
    [new Date('2017-06-01'), 47, '6,1m³', 45, '6,2m³', 53, '8463m³'],
    [new Date('2017-06-02'), 69, '9,1m³', 48, '6,7m³', 66, '10502m³'],
    [new Date('2017-06-03'), 39, '5,1m³', 25, '3,4m³', 41, '6604m³'],
    [new Date('2017-06-04'), 51, '6,7m³', 44, '6,0m³', 43, '6800m³']
  ]);

  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));

  // Create a range slider, passing some options
  var ChartRangeFilter = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'filter_div',
    options: {
      //displayLabels: false,
      //displayAnnotations: false,
      tooltip: {
        isHtml: true
      },
      filterColumnLabel: 'Datum',
      ui: {
        chartOptions: {
          annotations: {
            highContrast: false,
            stem: {
              color: 'transparent',
              length: 0
            },
            textStyle: {
              color: 'transparent'
            }
          },
          height: 55
        }
      }
    }
  });

  // Create a Column chart, passing some options
  var ColumnChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    options: {
      focusTarget: 'category',
      tooltip: {
        isHtml: true
      }
    }
  });

  // Establish dependencies, declaring that 'filter' drives 'ColumnChart',
  // so that the column chart will only display entries that are let through
  // given the chosen slider range.
  dashboard.bind(ChartRangeFilter, ColumnChart);

  // Draw the dashboard.
  dashboard.draw(chartsdata);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="dashboard_div">
  <!--Divs that will hold each control and chart-->
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>