anychart не принимает динамически добавляемые данные

Я использую anychart для рисования диаграммы на своей странице. Мой код такой

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/css/7.12.0/anychart-ui.min.css" />  
<input id="chart-charitytomoney" value="[[&quot;Charity 4&quot;,10.00],[&quot;Charity 2&quot;,20.00],[&quot;Charity Donate&quot;,100.00],[&quot;Donate Your Humanity&quot;,5920.00],[&quot;Gift your Work&quot;,3155.00],[&quot;Celebrate Baby Shower&quot;,770.00],[&quot;Refer Friends&quot;,110.00],[&quot;Gift Your Friends&quot;,200.00],[&quot;Celebrate B\u0027day With Us&quot;,220.00],[&quot;Celebrate Weekend&quot;,50.00],[&quot;Piggy Bank&quot;,4100.00],[&quot;Give a Single Gift&quot;,4050.00]]">
<div id="chart-container" style="height:550px!important"></div>
            <script type="text/javascript">

                $(document).ready(function(){
                anychart.onDocumentReady(function () {
                    var data = $("#chart-charitytomoney").val();
                 
                    // create column chart
                    chart = anychart.column();

                    // turn on chart animation
                    chart.animation(true);

                    // set chart title text settings
                    chart.title('Charities by donation');

                    // create area series with passed data

                    alert(data);
						var series = chart.column(data);

                    // set series tooltip settings
                    series.tooltip().titleFormatter(function () {
                        return this.x
                    });

                    series.tooltip().textFormatter(function () {
                        return '$' + parseInt(this.value).toLocaleString()
                    });
                    series.tooltip().position('top').anchor('bottom').offsetX(0).offsetY(5);

                    // set scale minimum
                    chart.yScale().minimum(0);

                    // set yAxis labels formatter
                    chart.yAxis().labels().textFormatter("${%Value}");

                    // tooltips position and interactivity settings
                    chart.tooltip().positionMode('point');
                    chart.interactivity().hoverMode('byX');

                    // axes titles
                    chart.xAxis().title('Product');
                    chart.yAxis().title('Revenue');

                    // set container id for the chart
                    chart.container('chart-container');

                    // initiate chart drawing
                    chart.draw();

                });
                });
            </script>

Мне кажется, все в порядке, но график не работает. но если я изменил эту строку

 var data = $("#chart-charitytomoney").val();

to 

var data = [["Charity 4", 10.00], ["Charity 2", 20.00], ["Charity Donate", 100.00], ["Donate Your Humanity", 5920.00], ["Gift your Work", 3155.00], ["Celebrate Baby Shower", 770.00], ["Refer Friends", 110.00], ["Gift Your Friends", 200.00], ["Celebrate B\u0027day With Us", 220.00], ["Celebrate Weekend", 50.00], ["Piggy Bank", 4100.00], ["Give a Single Gift", 4050.00]]

Все работает. Может ли кто-нибудь указать, что я делаю неправильно здесь? И как я могу это преодолеть?


javascript json charts anychart
person None    schedule 06.01.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это своеобразный способ передачи данных, но вы можете это сделать, просто:

Вариант 1

В поле ввода следует использовать кавычки:

<input id="chart-charitytomoney" value="[['Charity 4',10.00],['Charity 2',20.00],['Charity Donate',100.00],['Donate Your Humanity',5920.00],['Gift your Work',3155.00],['Celebrate Baby Shower',770.00],['Refer Friends',110.00],['Gift Your Friends',200.00],['Celebrate B\u0027day With Us',220.00],['Celebrate Weekend',50.00],['Piggy Bank',4100.00],['Give a Single Gift',4050.00]]">

И вам нужно eval() результат:

var data = eval($("#chart-charitytomoney").val());

Вот пример: http://jsfiddle.net/yr35w6nu/8/

Однако eval не совсем безопасен, если вы хотите хранить данные в строке в подобном поле, рассмотрите возможность использования такого кода:

Вариант 2

var data = JSON.parse($("#chart-charitytomoney").val().replace(/\'/g,'\"'));

показано в этом примере: http://jsfiddle.net/yr35w6nu/9/

То же самое можно применить к вашему коду с &quote;:

var data = JSON.parse($("#chart-charitytomoney").val().replace(/\&quot;/g,'\"'));

Пример цитат для синтаксического анализа: http://jsfiddle.net/yr35w6nu/10/

Вариант 3

Существует также способ сохранить строку в формате CSV:

<input id="chart-charitytomoney" value="Charity 4,10.00;Charity 2,20.00;Charity Donate,100.00;Donate Your Humanity,5920.00;Gift your Work,3155.00;Celebrate Baby Shower,770.00\nRefer Friends,110.00;Gift Your Friends,200.00;Celebrate B\u0027day With Us,220.00;Celebrate Weekend,50.00\nPiggy Bank,4100.00\nGive a Single Gift,4050.00">

а затем используйте его:

var data = anychart.data.set($("#chart-charitytomoney").val(),{rowsSeparator: ';'});

http://jsfiddle.net/yr35w6nu/13/

person AnyChart Support    schedule 24.01.2017