Обновление диаграммы с использованием на основе выпадающего списка

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

Проблема в этой строке:

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

Значением раскрывающегося списка является строка ("dataDaily", "dataWeekly" или "dataMonthly"), а не переменная массива, заданная этой литеральной строкой (dataDaily, dataWeekly, или же dataMonthly).

Быстрое решение было бы оценить (используя eval()) значение select, чтобы "преобразовать" строку в массив с тем же именем:

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>

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

Примечание: перед началом использования eval(), вы должны знать о его рисках, если не используются должным образом. Проверьте этот вопрос и комментарии для более подробной информации.