Question

我正在使用anychart在我的页面中绘制图表，我的代码就像这样

＆＃13;

    <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>

＆＃13;

一切看起来都不错，但图表不起作用。但如果我改变了这一行

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

到

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]]

一切正常。谁能指出我在这里做错了什么？我怎么能克服它？

Answer 1

这是传递数据的一种特殊方式，但您可以这样做，只需：

选项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/

anychart没有动态添加数据

1 个答案: