Question

我已经使用Google Charts创建了一个时间轴，并添加了一个带有NumberRangeFilter的仪表板，以允许自己移动甚至放大，以便更清楚地查看某些条目。它主要引发错误＆＃34; 一个或多个参与者未能绘制（）＆＃34;和＆＃34;无法阅读财产＆＃39; v＆＃39;当我从左边滑动时，未定义＆＃34; 。

无法阅读财产＆＃39; v＆＃39;当我第一次尝试从左侧滑动滑块时，仅出现一次未定义的错误。但是，当我从右边寻找它时，我没有看到任何问题。我已经查找了其他针对此类错误的回复，但无法找到有效的方法。

有人可以推荐修复吗？

分享以下代码：

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        google.load('visualization', '1', {packages: ['controls', 'timeline']});
        google.setOnLoadCallback(drawVisualization);

        function drawVisualization() {
            var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard'));

            var control = new google.visualization.ControlWrapper({
                'controlType': 'NumberRangeFilter',
                'containerId': 'control',
                'ui': {'labelStacking': 'vertical'},
                'options': {
                    'filterColumnLabel': 'Start',
                    'hAxis':{'slantedText':'true','direction':'1','format': { 'pattern':'0' }},
                    'hAxis.gridlines.color':'#ccc',
                    'hAxis': {
                        gridlines: {
                            color: 'transparent'
                        }
                    }
                },
            });

            var chart = new google.visualization.ChartWrapper({
                'chartType': 'Timeline',
                'containerId': 'chart',
                'options': {
                    'width': 1300,
                    'height': 600,
                    'labelStacking': 'horizontal', 'format': { 'pattern':'####','fractionDigits':'0','groupingSymbol':'','showRangeValues':true },
                    'chartArea': {
                        width: '100%', // make sure this is the same for the chart and control so the axes align right
                        height: '100%'
                    },
                    'backgroundColor': '#ffd',
                    //'minValue': 0, 
                },
                'view': {
                        'columns': [0, 1, 2, 3]
                },
            });

            var data = new google.visualization.arrayToDataTable([
                ['Processor', 'Task', 'Start', 'End'],
                [ 'XXX1', 'Func1', 0, 10 ],
                [ 'XXX1', 'Func3', 12, 15 ],
                [ 'XXX2', 'Func2', 5, 12 ],
                [ 'XXX1', 'Func1', 35, 60 ],
                [ 'XXX1', 'Func1', 65, 90 ],
                [ 'XXX1', 'Func1', 95, 190 ],
                [ 'XXX1', 'Func2', 18, 19 ],
                [ 'XXX3', 'Func2', 5, 9 ],
                [ 'XXX3', 'Func4', 18, 20 ],
                [ 'XXX3', 'Func3', 10, 15 ],
                [ 'XXX5', 'Func3', 10, 15 ],
                [ 'XXX4', 'Func3', 10, 15 ],
                [ 'XXX2', 'Func3', 10, 15 ],
                [ 'XXX7', 'Func3', 10, 15 ],
            ]);

            dashboard.bind(control, chart);
            dashboard.draw(data);
        }

    </script>
</head>

<style>
    .center {
        text-align: center;
        border: 1px solid green;
    }
</style>
<body style="font-family: Arial;border: 0 none;">
    <div id="dashboard" style="width:100%; height:100%; overflow:scroll;">
        <div class="center" id="control" style="margin-right: auto; border: 1px solid green;"> </div > <br>
        <div id="chart" style="position: relative; width: 600px; height: 200px; bottom: 0px; padding-bottom: 200px; "></div>
    </div>
    <div id="junk_div" style="display: none;"></div>
</body>

Answer 1

使用'number'和'Start'的{{1}}列时，数值代表毫秒

来自问题的数据包括非常小的时间范围
并且图表在绘制范围时遇到问题，
特别是当包含'End'的行被删除时当范围从左侧滑动

时，这也是结果

进行测试，删除第一行数据并绘制图表，
它会导致相同的错误，而不使用滑块

有一些事情会阻止图表抛出错误

1）将表示的时间范围增加到秒，例如

2）使用var data = new google.visualization.arrayToDataTable([ ['Processor', 'Task', 'Start', 'End'], [ 'XXX1', 'Func1', 0, 1000 ], [ 'XXX1', 'Func1', 3500, 6000 ], [ 'XXX1', 'Func1', 6500, 9000 ], ...选项强制图表从零开始，
无论数据中的行

hAxis.mimValue

此选项用于以下工作代码段...

＆＃13;

hAxis: {
  minValue: 0,
}

＆＃13;

google.charts.load('current', {
  callback: drawVisualization,
  packages:['controls', 'table', 'timeline']
});

function drawVisualization() {
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  var control = new google.visualization.ControlWrapper({
    controlType: 'NumberRangeFilter',
    containerId: 'control',
    options: {
      filterColumnLabel: 'Start',
      ui: {
        format: {
          pattern: '0'
        },
        labelStacking: 'vertical'
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    containerId: 'chart',
    options: {
      backgroundColor: '#ffd',
      height: 336,
      hAxis: {
        minValue: 0,
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table'
  });

  var data = new google.visualization.arrayToDataTable([
    ['Processor', 'Task', 'Start', 'End'],
    [ 'XXX1', 'Func1', 0, 10 ],
    [ 'XXX1', 'Func1', 35, 60 ],
    [ 'XXX1', 'Func1', 65, 90 ],
    [ 'XXX1', 'Func1', 95, 190 ],
    [ 'XXX1', 'Func2', 18, 19 ],
    [ 'XXX1', 'Func3', 12, 15 ],
    [ 'XXX2', 'Func2', 5, 12 ],
    [ 'XXX2', 'Func3', 10, 15 ],
    [ 'XXX3', 'Func2', 5, 9 ],
    [ 'XXX3', 'Func3', 10, 15 ],
    [ 'XXX3', 'Func4', 18, 20 ],
    [ 'XXX4', 'Func3', 10, 15 ],
    [ 'XXX5', 'Func3', 10, 15 ],
    [ 'XXX7', 'Func3', 10, 15 ],
  ]);

  dashboard.bind(control, [chart, table]);
  dashboard.draw(data);
}

＆＃13;

div {
  margin-bottom: 16px;
}

＆＃13;

其他说明......

1）建议不使用 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard"> <div id="control"></div> <div id="chart"></div> <div id="table"></div> </div>加载库

根据release notes ...

通过jsapi加载程序保留的Google Charts版本不再一致更新。从现在开始请使用新的gstatic装载机。

jsapi

这将仅更改<script src="https://www.gstatic.com/charts/loader.js"></script>声明

load

2）google.charts.load('current', { callback: drawVisualization, packages:['controls', 'table', 'timeline'] });和chart

上有几个无效的选项

control：control应该是'ui'的一部分，'options'没有选项存在（如果确实如此，它应该只定义一次）

'hAxis'：没有选项可以使用＆＃39; labelStacking＆＃39;或＆＃39;格式＆＃39;

3）建议不要在容器上使用 chart属性

此外，style属性中的尺寸设置与图表style中的尺寸设置冲突

options

NumberRangeFilter滑块显示一个或多个参与者从左侧搜索栏时无法绘制（）错误？

1 个答案: