带滑块的Google Chart信息中心

时间：2016-10-21 16:20:25

标签： javascript charts google-visualization

我已使用Google Charts成功创建了一个包含动态图表的网站。 然后我尝试添加一个滑块，但我失败了。 我得到的错误是“一个或多个参与者无法绘制（）”和“列0不是数字”。

工作网站的脚本是：

<script type="text/javascript">

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
    url: " ulsuccessperop.php ",          
    dataType: "json",
    async: false
  }).responseText;

  var data = new google.visualization.DataTable(jsonData);
  var options = {
     'title': 'UL Success per operatore',              
     'width':1200,
     'height':900,
     chartArea:{left:80,top:50,width:"70%",height:"80%"}
     };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
}

</script>

无效网站的脚本是：

<script type="text/javascript">

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard() {
   var jsonData = $.ajax({
       url: "ulsuccessperop.php",               
       dataType: "json",
       async: false
       }).responseText;

   var data = new google.visualization.DataTable(jsonData);                     
   var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));        

   var dataRangeSlider = new google.visualization.ControlWrapper({      
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter_div',
      'options': {
            'filterColumnLabel': 'Data'
            }
       });

   var lineChart = new google.visualization.ChartWrapper({
       'chartType': 'LineChart',
       'containerId': 'chart_div',
       'options': {
           'title': 'UL Success per operatore',             
           'width':1200,
           'height':900,
           chartArea:{left:80,top:50,width:"70%",height:"80%"}
           }

      });

dashboard.bind(dataRangeSlider, lineChart);
dashboard.draw(data);

}

</script>

数据由PHP页面（ulsuccessperop.php）提供，该页面返回JSON格式的值数组（多列）。 可能提供给Dashboard的数据与提供给Chart的数据不同，但我在Google Chart文档中找不到任何有关该数据的信息。

WhiteHat建议更改后的新代码：

google.charts.load('current', {'packages':['corechart', 'controls']});

google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard() {
    var jsonData = $.ajax({
        url: "data/regperop.php,
        dataType: "json",
        async: false
        }).responseText;

    var data = new google.visualization.DataTable(jsonData);                
    var view = new google.visualization.DataView(data);                     
    view.setColumns([{
      calc: function (data, row) {
        return new Date(data.getValue(row, 0))
      },
      type: 'date',
      label: 'Data'
    }, 1, 2, 3, 4]);


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

    var dataRangeSlider = new google.visualization.ControlWrapper({     
        'controlType': 'DateRangeFilter',
        'containerId': 'filter_div',
        'options': {
            'filterColumnLabel': 'Data'
       }
    });


    google.visualization.events.addListener(dataRangeSlider, 'ready', function () {
        var state = dataRangeSlider.getState();
        console.log(state.lowValue, state.highValue);
      });


    var lineChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'chart_div',
        'options': {
            'title': 'Numero registrazioni per operatore',              'width':1200,
            'height':900,
            chartArea:{left:80,top:50,width:"70%",height:"80%"}
        }

    });


    dashboard.bind(dataRangeSlider, lineChart);
    dashboard.draw(data);

}

以下是JSON数据的示例：

{"cols":[{"label":"Data","type":"date"},
        {"label":"OP1","type":"number"},
        {"label":"OP2","type":"number"},
        {"label":"OP3","type":"number"},
        {"label":"OP4","type":"number"}],
 "rows":[{"c":[{"v":"08-01-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-02-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-03-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-04-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-05-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-06-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-07-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-08-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-09-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-10-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]}]}

1 个答案:

答案 0 :(得分：0)

来自'Data'，您希望使用DateRangeFilter与NumberRangeFilter

e.g。 - ＆GT; controlType: 'DateRangeFilter',

但是如果你想使用其中任何一个，第一列需要的东西不是......
type: 'string'

type: 'date'

需要'DateRangeFilter' type: 'number'

的

'NumberRangeFilter'

另外，如果使用'DateRangeFilter'，
需要修改JSON以便Google将第一列标识为日期

1。如果您不想更改JSON，请使用DataView更改第一列

请参阅以下工作代码段...

＆＃13;
＆＃13; 
google.charts.load('current', {
  callback: drawDashboard,
  packages: ['corechart', 'controls']
});

function drawDashboard() {
  var jsonData = {
    "cols":[
      {"label":"Data", "type":"string"},
      {"label":"OP1", "type":"number"},
      {"label":"OP2", "type":"number"},
      {"label":"OP3", "type":"number"},
      {"label":"SFR(208-10)", "type":"number"}
    ],
    "rows":[
      {"c":[{"v":"2016-10-18"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"2016-10-19"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"2016-10-20"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"2016-10-21"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":""},{"v":1},{"v":0},{"v":1},{"v":0}]}
    ]
  };

  var data = new google.visualization.DataTable(jsonData);
  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (data, row) {
      return new Date(data.getValue(row, 0))
    },
    type: 'date',
    label: 'Data'
  }, 1, 2, 3, 4]);

  var dataRangeSlider = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'filter_div',
    options: {
      filterColumnLabel: 'Data'
    }
  });

  google.visualization.events.addListener(dataRangeSlider, 'ready', function () {
    var state = dataRangeSlider.getState();
    console.log(state.lowValue, state.highValue);
  });

  var lineChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    options: {
      title: 'UL Success per operatore',
      width: 1200,
      height: 900,
      chartArea: {
        left: 80,
        top: 50,
        width: '70%',
        height: '80%'
      }
    }
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
  dashboard.bind(dataRangeSlider, lineChart);
  dashboard.draw(view);
}
＆＃13; 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

2。如果您想要更改JSON，则应将其格式化为以下工作代码段...

// NOTE: Months using this constructor are zero-based! (9=OCT)
{"v":"Date(2016, 9, 18)"}
或
{"v":null}

＆＃13;
＆＃13; 
google.charts.load('current', {
  callback: drawDashboard,
  packages: ['corechart', 'controls']
});

function drawDashboard() {
  var jsonData = {
    "cols":[
      {"label":"Data","type":"date"},
      {"label":"OP1","type":"number"},
      {"label":"OP2","type":"number"},
      {"label":"OP3","type":"number"},
      {"label":"SFR(208-10)","type":"number"}
    ],
    "rows":[
      {"c":[{"v":"Date(2016, 9, 18)"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"Date(2016, 9, 19)"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"Date(2016, 9, 20)"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"Date(2016, 9, 21)"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":null},{"v":1},{"v":0},{"v":1},{"v":0}]}
    ]
  };

  var data = new google.visualization.DataTable(jsonData);

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

  var dataRangeSlider = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'filter_div',
    options: {
      filterColumnLabel: 'Data'
    }
  });

  var lineChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    options: {
      title: 'UL Success per operatore',
      width: 1200,
      height: 900,
      chartArea: {
        left: 80,
        top: 50,
        width: '70%',
        height: '80%'
      }
    }
  });

  dashboard.bind(dataRangeSlider, lineChart);
  dashboard.draw(data);
}
＆＃13; 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题