当前位置： 文江博客话题详情

谷歌图表“不符合控制或可视化规范”

发布于 2024-12-18 21:48:20 字数 3179 浏览 2 评论 0原文

当尝试将仪表板控件添加到工作的 Google Charts 项目时，我得到 “.. 不符合控制或可视化规范” - 与末尾的“var仪表板=新...”行相关。

下面的代码将独立工作并重现整个错误：

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load('visualization', '1.0', {'packages':['annotatedtimeline', 'controls']});

      google.setOnLoadCallback(drawChart);

      function drawChart() {         
            var data = new google.visualization.DataTable();
            data.addColumn('date', 'timestamp');

            data.addColumn('number', 'Age Partnership');
            data.addColumn('number', 'Aviva');
            data.addColumn('number', 'Saga');
            data.addColumn('number', 'Global');
            data.addColumn('number', 'Bower');
            data.addColumn('number', 'Esmart');
            data.addColumn('number', 'key');


            data.addRows(3);
            data.setValue(0, 0, new Date(2011, 10, 25, 15, 21, 16, 0));data.setValue(0, 2, 1);data.setValue(0, 1, 2);data.setValue(0, 7, 3);data.setValue(0, 5, 4);data.setValue(0, 4, 5);data.setValue(0, 3, 8);data.setValue(0, 6, 10);data.setValue(1, 0, new Date(2011, 10, 26, 12, 7, 50, 0));data.setValue(1, 1, 1);data.setValue(1, 2, 2);data.setValue(1, 4, 3);data.setValue(1, 7, 4);data.setValue(1, 5, 5);data.setValue(1, 3, 7);data.setValue(1, 6, 8);data.setValue(2, 0, new Date(2011, 10, 26, 12, 15, 2, 0));data.setValue(2, 1, 1);data.setValue(2, 2, 2);data.setValue(2, 7, 3);data.setValue(2, 4, 4);data.setValue(2, 5, 5);data.setValue(2, 6, 7);data.setValue(2, 3, 8);
            var options = { 
                width: 1100, 
                height: 450, 
                title: 'Keyword Performance - equity release',
                hAxis: {title: 'Date/Time', showTextEvery: 24},
                isStacked:"true",
                dateFormat: 'HH:mm MMMM dd, yyyy'

            };

            var categoryPicker = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'control1',
                'options': {
                  'filterColumnLabel': 'Metric',
                  'ui': {
                    'allowTyping': false,
                    'allowMultiple': true,
                    'selectedValuesLayout': 'belowStacked'
                  }
                },
                // Define an initial state, i.e. a set of metrics to be initially selected.
                'state': {'selectedValues': [1,2,3,4,5,6,7]}
            });

            var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div0'));
            chart.draw(data, options);

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).bind(categoryPicker, drawChart).draw(data, options);

    }
</script>
</head>

<body>
<div id="dashboard_div"> 
  <!--Divs that will hold each control and chart-->
  <div id="control1"></div>
  <div id="chart_div0"  style="width: 1100px; height: 450px;"></div>
</div>
</body>
</html>
原文

When trying to add a Dashboard control to a working Google Charts item, I get
".. does not fit either the Control or Visualization specification" - relating to the line "var dashboard = new ..." towards the end.

The code below will work standalone and reproduces the entire error:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load('visualization', '1.0', {'packages':['annotatedtimeline', 'controls']});

      google.setOnLoadCallback(drawChart);

      function drawChart() {         
            var data = new google.visualization.DataTable();
            data.addColumn('date', 'timestamp');

            data.addColumn('number', 'Age Partnership');
            data.addColumn('number', 'Aviva');
            data.addColumn('number', 'Saga');
            data.addColumn('number', 'Global');
            data.addColumn('number', 'Bower');
            data.addColumn('number', 'Esmart');
            data.addColumn('number', 'key');


            data.addRows(3);
            data.setValue(0, 0, new Date(2011, 10, 25, 15, 21, 16, 0));data.setValue(0, 2, 1);data.setValue(0, 1, 2);data.setValue(0, 7, 3);data.setValue(0, 5, 4);data.setValue(0, 4, 5);data.setValue(0, 3, 8);data.setValue(0, 6, 10);data.setValue(1, 0, new Date(2011, 10, 26, 12, 7, 50, 0));data.setValue(1, 1, 1);data.setValue(1, 2, 2);data.setValue(1, 4, 3);data.setValue(1, 7, 4);data.setValue(1, 5, 5);data.setValue(1, 3, 7);data.setValue(1, 6, 8);data.setValue(2, 0, new Date(2011, 10, 26, 12, 15, 2, 0));data.setValue(2, 1, 1);data.setValue(2, 2, 2);data.setValue(2, 7, 3);data.setValue(2, 4, 4);data.setValue(2, 5, 5);data.setValue(2, 6, 7);data.setValue(2, 3, 8);
            var options = { 
                width: 1100, 
                height: 450, 
                title: 'Keyword Performance - equity release',
                hAxis: {title: 'Date/Time', showTextEvery: 24},
                isStacked:"true",
                dateFormat: 'HH:mm MMMM dd, yyyy'

            };

            var categoryPicker = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'control1',
                'options': {
                  'filterColumnLabel': 'Metric',
                  'ui': {
                    'allowTyping': false,
                    'allowMultiple': true,
                    'selectedValuesLayout': 'belowStacked'
                  }
                },
                // Define an initial state, i.e. a set of metrics to be initially selected.
                'state': {'selectedValues': [1,2,3,4,5,6,7]}
            });

            var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div0'));
            chart.draw(data, options);

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).bind(categoryPicker, drawChart).draw(data, options);

    }
</script>
</head>

<body>
<div id="dashboard_div"> 
  <!--Divs that will hold each control and chart-->
  <div id="control1"></div>
  <div id="chart_div0"  style="width: 1100px; height: 450px;"></div>
</div>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

拥抱影子 2024-12-25 21:48:20

要使用 Dashboard 元素，您需要向其中提供 ChartWrapper 和 ControlWrapper 元素。现在，您仅使用 ControlWrapper 并尝试将其链接到仪表板本身不涉及的图表（因为它不是 ChartWrapper 对象）。我尝试创建一个带注释的时间线图表作为仪表板的一部分，但没有成功：

function drawVisualization() {
  // Prepare the data
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Sold Pens');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addRows([
    [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
    [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
    [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
    [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
    [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
    [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
  ]);

  // Define a slider control for the 'Donuts eaten' column
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Sold Pencils',
      'ui': {'labelStacking': 'vertical'}
    }
  });

  // Define a time line chart
  var timeline = new google.visualization.ChartWrapper({
    'chartType': 'AnnotatedTimeLine',
    'containerId': 'chart1',
    'options': {
      'width': 600,
      'height': 300,
    }
  });

  // Create the dashboard.
  new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the slider to affect the piechart
    bind(slider, timeline).
    // Draw the dashboard
    draw(data);
}

它无法绘制图表（尽管控件工作正常）。可能是因为带注释的时间线图表是 Flash 图表，所以它在仪表板中不能很好地工作。或者可能只是 ChartWrapper 对象类型不允许带注释的时间线。如果我对折线图做同样的事情，它会起作用：

function drawVisualization() {
  // Prepare the data
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'});
  data.addColumn('number', 'Sold Pens');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'});
  data.addRows([
    [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
    [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
    [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
    [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
    [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
    [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
  ]);

  // Define a slider control for the 'Donuts eaten' column
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Sold Pencils',
      'ui': {'labelStacking': 'vertical'}
    }
  });

  // Define a time line chart
  var timeline = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1',
    'options': {
      'width': 600,
      'height': 300,
    }
  });

  // Create the dashboard.
  new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the slider to affect the piechart
    bind(slider, timeline).
    // Draw the dashboard
    draw(data);
}

To use a Dashboard element you need to feed both ChartWrapper and ControlWrapper elements in to it. Right now you are using just the ControlWrapper and trying to link it to a chart not involved in the Dashboard itself (because it isn't a ChartWrapper object). I gave a shot at creating an Annotated Time Line chart as a part of a dashboard, but wasn't successful:

function drawVisualization() {
  // Prepare the data
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Sold Pens');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addRows([
    [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
    [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
    [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
    [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
    [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
    [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
  ]);

  // Define a slider control for the 'Donuts eaten' column
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Sold Pencils',
      'ui': {'labelStacking': 'vertical'}
    }
  });

  // Define a time line chart
  var timeline = new google.visualization.ChartWrapper({
    'chartType': 'AnnotatedTimeLine',
    'containerId': 'chart1',
    'options': {
      'width': 600,
      'height': 300,
    }
  });

  // Create the dashboard.
  new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the slider to affect the piechart
    bind(slider, timeline).
    // Draw the dashboard
    draw(data);
}

It fails to draw the chart (though the control works fine). It may be that because the Annotated Time Line chart is a flash chart, it doesn't work nicely in dashboards. Or it could just be that the ChartWrapper object type doesn't allow Annotated Time Lines. If I do the same thing with a line chart, it works:

function drawVisualization() {
  // Prepare the data
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'});
  data.addColumn('number', 'Sold Pens');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'});
  data.addRows([
    [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
    [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
    [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
    [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
    [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
    [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
  ]);

  // Define a slider control for the 'Donuts eaten' column
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Sold Pencils',
      'ui': {'labelStacking': 'vertical'}
    }
  });

  // Define a time line chart
  var timeline = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1',
    'options': {
      'width': 600,
      'height': 300,
    }
  });

  // Create the dashboard.
  new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the slider to affect the piechart
    bind(slider, timeline).
    // Draw the dashboard
    draw(data);
}
回复 原文
~没有更多了~

关于作者

眼眸里的快感

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文