Диаграмма обновления Использование на основе раскрывающегося списка

Question

Я пытаюсь отобразить диаграммы на основе выбора определенных критериев даты. Я бы хотел, чтобы диаграммы отображали разные данные, когда я выбираю вариант (например, ежемесячно) из выпадающего списка.

В настоящее время сценарий, приведенный ниже, не выполняет ожидаемый результат (он не отображает данные, когда я выбираю ежедневно/ежемесячно из списка выбора). Я что-то пропустил в своем коде ниже? Пожалуйста посоветуй.

Это мой код:

var dataDaily = [ 
 
    ['CVR', 'TALK'], 
 
    [90, 353] 
 
]; 
 

 
var dataWeekly = [ 
 
    ['CVR', 'TALK'], 
 
    [225, 893] 
 
]; 
 

 
var dataMonthly = [ 
 
    ['CVR', 'TALK'], 
 
    [1602, 4934] 
 
]; 
 

 
$(function() { 
 
    
 
    // Initial chart 
 
    var chart = c3.generate({ 
 
     data: { 
 
      rows: dataDaily, 
 
      type: 'pie' 
 
     } 
 
    }); 
 
    
 
    // Redraw chart depending on which option is selected 
 
    $("#DataType").change(function (evt) { 
 
     var timeSelection = $("#DataType").val(); 
 
     var chart = c3.generate({ 
 
      data: { 
 
       rows: timeSelection, 
 
       type: 'pie' 
 
      } 
 
     }); 
 
    }); 
 
    
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"> 
 
<select id="DataType"> 
 
    <option value="dataDaily">Daily</option> 
 
    <option value="dataWeekly">Weekly</option> 
 
    <option value="dataMonthly">Monthly</option> 
 
</select> 
 
<div id="chart"></div>

Вы также можете посмотреть демо код (и вопрос) на этом JSFiddle: http://jsfiddle.net/km97cdL3/

Answer 1

Проблема заключается в том line:

var timeSelection = $("#DataType").val(); 

T Значение dropdown - это строка (dataDaily), «dataWeekly» или «dataMonthly»), а не переменная массива, указанная в этой строке литерала (dataDaily, dataWeekly или dataMonthly).

Быстрое решение было бы оценить (с помощью eval()) значение избранных, таким образом, вы будете «трансформировать» строку в массив с тем же именем:

var timeSelection = eval($("#DataType").val()); 

Таким образом, окончательный код будет выглядеть так:

var dataDaily = [ 
 
    ['CVR', 'TALK'], 
 
    [90, 353] 
 
]; 
 

 
var dataWeekly = [ 
 
    ['CVR', 'TALK'], 
 
    [225, 893] 
 
]; 
 

 
var dataMonthly = [ 
 
    ['CVR', 'TALK'], 
 
    [1602, 4934] 
 
]; 
 

 
$(function() { 
 
    
 
    // Initial chart 
 
    var chart = c3.generate({ 
 
     data: { 
 
      rows: dataDaily, 
 
      type: 'pie' 
 
     } 
 
    }); 
 
    
 
    // Redraw chart depending on which option is selected 
 
    $("#DataType").change(function (evt) { 
 
     var timeSelection = eval($("#DataType").val()); 
 
     var chart = c3.generate({ 
 
      data: { 
 
       rows: timeSelection, 
 
       type: 'pie' 
 
      } 
 
     }); 
 
    }); 
 
    
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"> 
 

 
<select id="DataType"> 
 
    <option value="dataDaily">Daily</option> 
 
    <option value="dataWeekly">Weekly</option> 
 
    <option value="dataMonthly">Monthly</option> 
 
</select> 
 
<div id="chart"></div>

Вы также можете видеть, что это работает правильно на этом JSF iddle: http://jsfiddle.net/km97cdL3/1/

Примечание: Перед началом использования eval() вы должны знать о своих рисках, если они не используются должным образом. Check this question and the comments for more details.