Данные диаграммы Google Chart несколько данных

Я создал панель управления диаграммой google с различными данными для каждой диаграммы пончика, но только data_2 возвращает вместо data_1 для первого графика <div> и data_2 для второго графика <div>. Source document для многократной диаграммы с различными данными требует отдельных функций, но есть ли способ использовать два набора данных в первой функции drawStuff_1?
Я в конечном счете хочу одну панель управления, один ControlWrapper (один ко многим), несколько наборов данных (carlos, josh и т. Д.) И несколько диаграмм пончиков (<div> для carlos, <div> для josh, кто бы еще ни был).Данные диаграммы Google Chart несколько данных

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript"> 
 
     google.charts.load('current', {'packages':['corechart', 'controls']}); 
 
     google.charts.setOnLoadCallback(drawStuff_1); 
 
     google.charts.setOnLoadCallback(drawStuff_2); 
 

 
     function drawStuff_1() { 
 

 
     var dashboard = new google.visualization.Dashboard(
 
      document.getElementById('programmatic_dashboard_div')); 
 
      
 
     programmaticFilter_1 = new google.visualization.ControlWrapper({ 
 
      'controlType': 'CategoryFilter', 
 
      'containerId': 'programmatic_control_div_1', 
 
      'options': { 
 
      'filterColumnLabel': 'Status', 
 
      'ui': {'labelStacking': 'vertical'} 
 
      } 
 
     }); 
 
    // First dataset 
 
     var data_1 = new google.visualization.arrayToDataTable([ 
 
     ['Status', 'Count'], 
 
     ['Dual Approved' , 5], 
 
     ['Approved', 7], 
 
     ['Review', 3], 
 
     ['Draft', 2], 
 
     ['Not In', 6], 
 
     ['Edit Rerun', 1], 
 
     ]); 
 
     programmaticChart_1 = new google.visualization.ChartWrapper({ 
 
     'chartType': 'PieChart', 
 
     'containerId': 'programmatic_chart_div_1', 
 
     'options': { 
 
      'width': 290, 
 
      'height': 220, 
 
      'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 
 
      'pieSliceText': 'value', //percentage' 'value' 'label''none' 
 
      'pieHole': 0.4, 
 
      'legend': {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }}, 
 
      'pieSliceBorderColor': 'Black', 
 
      'title': 'Josh', 
 
      
 
     } 
 
     }); 
 

 
     dashboard.bind(programmaticFilter_1, programmaticChart_1); 
 
     dashboard.draw(data_1); 
 

 
    } 
 
    
 
    function drawStuff_2() { 
 

 
     var dashboard = new google.visualization.Dashboard(
 
      document.getElementById('programmatic_dashboard_div')); 
 
      
 
// second dataset  
 
      var data_2 = new google.visualization.arrayToDataTable([ 
 
     ['Status', 'Count'], 
 
     ['Dual Approved' , 1], 
 
     ['Approved', 10], 
 
     ['Review', 2], 
 
     ['Draft', 9], 
 
     ['Not In', 10], 
 
     ['Edit Rerun', 4], 
 
     ]); 
 
     
 
     programmaticChart_2 = new google.visualization.ChartWrapper({ 
 
     'chartType': 'PieChart', 
 
     'containerId': 'programmatic_chart_div_2', 
 
     'options': { 
 
      'width': 250, 
 
      'height': 220, 
 
      'legend': 'none', 
 
      'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 
 
      'pieSliceText': 'value', //percentage' 'value' 'label''none' 
 
      'pieHole': 0.4, 
 
      'pieSliceBorderColor': 'Black', 
 
      'title': 'Carlos', 
 
     } 
 
     }); 
 

 
     dashboard.bind(programmaticFilter_1, programmaticChart_2); 
 
     dashboard.draw(data_2); 
 
} 
 
    </script> 
 
    
 
    <body> 
 
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> 
 
       <td> 
 
      <div id="programmatic_control_div_1" style="padding-left: 2em; min-width: 250px"></div> 
 
      </td> 
 
     <table class="columns"> 
 
     <tr> 
 
      <td> 
 
      <div id="programmatic_chart_div_1"></div> 
 
      </td> 
 
      <td> 
 
      <div id="programmatic_chart_div_2"></div> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </body>

источник

2016-09-04 Omar V.

первый, setOnLoadCallback следует использовать только один раз на странице

, но это легко обойти, и вы можете включить callback непосредственно в load заявлении

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

следующий, у вас может быть только один набора данных на Dashboard

однако, вы можете использовать view свойство на ChartWrapper
контролировать, какие столбцы или строки, относятся к диаграмме

view свойства также доступен на ControlWrapper

см. Следующий рабочий фрагмент, который включает в себя одну приборную панель, один элемент управления,
и две диаграммы (по одному для каждого Карлоса и Джоша)

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

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

 
    // Combined dataset 
 
    var data = new google.visualization.arrayToDataTable([ 
 
    ['Status', 'Carlos', 'Josh'], 
 
    ['Dual Approved', 5, 1], 
 
    ['Approved', 7, 10], 
 
    ['Review', 3, 2], 
 
    ['Draft', 2, 9], 
 
    ['Not In', 6, 10], 
 
    ['Edit Rerun', 1, 3] 
 
    ]); 
 

 
    var programmaticFilter = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'control_div', 
 
    options: { 
 
     filterColumnLabel: 'Status', 
 
     ui: { 
 
     labelStacking: 'vertical' 
 
     } 
 
    } 
 
    }); 
 

 
    var programmaticChart_Carlos = new google.visualization.ChartWrapper({ 
 
    chartType: 'PieChart', 
 
    containerId: 'chart_div_Carlos', 
 
    options: { 
 
     width: 290, 
 
     height: 220, 
 
     chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 
 
     pieSliceText: 'value', 
 
     pieHole: 0.4, 
 
     legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }}, 
 
     pieSliceBorderColor: 'Black' 
 
    }, 
 
    view: { 
 
     columns: [0, 1] 
 
    } 
 
    }); 
 
    programmaticChart_Carlos.setOption('title', 'Carlos'); 
 

 
    var programmaticChart_Josh = new google.visualization.ChartWrapper({ 
 
    chartType: 'PieChart', 
 
    containerId: 'chart_div_Josh', 
 
    options: { 
 
     width: 290, 
 
     height: 220, 
 
     chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 
 
     pieSliceText: 'value', 
 
     pieHole: 0.4, 
 
     legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }}, 
 
     pieSliceBorderColor: 'Black' 
 
    }, 
 
    view: { 
 
     columns: [0, 2] 
 
    } 
 
    }); 
 
    programmaticChart_Josh.setOption('title', 'Josh'); 
 

 
    dashboard.bind(
 
    programmaticFilter, 
 
    [programmaticChart_Carlos, programmaticChart_Josh] 
 
); 
 
    dashboard.draw(data); 
 
}

.ggl-dashboard { 
 
    border: 1px solid #ccc; 
 
} 
 

 
.ggl-control (
 
    min-width: 250px; 
 
    padding-left: 2em; 
 
) 
 

 
.ggl-chart (
 
    display: inline-block; 
 
)

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 

 
<div class="ggl-dashboard" id="dashboard_div"> 
 
    <div class="ggl-control" id="control_div"></div> 
 
    <div class="ggl-chart" id="chart_div_Carlos"></div> 
 
    <div class="ggl-chart" id="chart_div_Josh"></div> 
 
</div>

источник

2016-09-05 02:07:18 WhiteHat

Ах, да я считал объединение наборов данных, но был слишком упрям, думая, что есть способ, лол. Спасибо, WhiteHat, очень полезно! –

Данные диаграммы Google Chart несколько данных

ответ

Смежные вопросы