个人中心
gpt4 book ai didi

google-visualization - 谷歌图表 "does not fit either the Control or Visualization specification"

转载 作者：行者123 更新时间：2023-12-01 02:41:07 31 4
gpt4 key购买 nike

尝试将 Dashboard 控件添加到有效的 Google Charts 项目时，我得到
“.. 不符合控制或可视化规范” - 与行“var dashboard = new ... ”有关。

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

<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>

最佳答案

使用 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);
}

它无法绘制图表(尽管控件工作正常)。可能是因为带注释的时间线图表是一个快速图表，它在仪表板中不能很好地工作。或者它可能只是 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);
}

关于google-visualization - 谷歌图表 "does not fit either the Control or Visualization specification"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8325610/

31 4 0
文章推荐： jQuery DOM 遍历 .prev()
文章推荐： javascript - WebRTC 如何设置限制以在可用时使用音频
文章推荐： google-maps - 谷歌地图未捕获类型错误 : Cannot read property 'offsetWidth' of null
文章推荐： php - CKEDITOR - Uncaught Error : The specified element mode is not supported on element: "meta"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com