Question

我想通过ajax使用数据和级别动态，所以我使用如下但不工作。

我的ajax在php的json_encode中返回数据。我的代码是：

success: function (result) {
           result = JSON.parse(result);
           var labels = result['labels'];
           var data = result['data'];
           //console.log(data);
           var ctx = document.getElementById("chartbtc");
           var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: [labels],
                        datasets: [{
                            label: 'Market Price (USD)',
                            data: [data],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: false
                                }
                            }]
                        }
                    }
                });
        }

但图表没有产生：

Ajax结果是：

{"labels":"13-Nov-2017, 14-Nov-2017, 15-Nov-2017, 16-Nov-2017, 17-Nov-2017, 18-Nov-2017, 19-Nov-2017, 20-Nov-2017, 21-Nov-2017, 22-Nov-2017, 23-Nov-2017, 24-Nov-2017, 25-Nov-2017, 26-Nov-2017, 27-Nov-2017, 28-Nov-2017, 29-Nov-2017, 30-Nov-2017, 01-Dec-2017, 02-Dec-2017, 03-Dec-2017, 04-Dec-2017, 05-Dec-2017, 06-Dec-2017, 07-Dec-2017, 08-Dec-2017, 09-Dec-2017, 10-Dec-2017, 11-Dec-2017, 12-Dec-2017","data":"6550.22, 6635.41, 7301.42, 7815.03, 7786.88, 7817.14, 8007.65, 8255.59, 8059.8, 8268.03, 8148.94, 8250.97, 8707.4, 9284.14, 9718.29, 9952.5, 9879.32, 10147.37, 10883.91, 11071.36, 11332.62, 11584.82, 11878.43, 13540.98, 16501.97, 16007.43, 15142.83, 14869.8, 16762.11, 17276.39"}

Answer 1

由于您提供了ajax结果，因此无法使用图表生成。在您的情况下，result["labels"]是一个字符串，您只是创建一个包含1个元素的列表，该元素是整个字符串（对labels属性无效且不起作用）。您应该做的是拆分字符串，正确格式化，然后将其作为列表提供给labels属性。最简单的方法是使用split()函数，在您的情况下，您可以按", "拆分。虽然我建议尽可能实现更好的响应（具有类似的结果：{"labels": ["13-Nov-2017", "14-Nov-2017", ...]}）。

希望这有帮助！

Answer 2

您第一次可以使用自己的值填充图表，但是当动态附加数据时，您应该删除canvas元素并重新生成它。这样您的数据就会在图表上动态附加。

你可以尝试这样的事情。

<canvas id="chartbtc" class="canvasChart"></canvas>

<script>

    dynamicDataAppendOnChart(labels, data); // On page loading you will be having your own data so you can pass them, or if you want that to be happen with ajax when page loading itself you can trigger the click event.

    $('#btnClick').trigger('click');

    // You will be calling the function with click event...
    $('#btnClick').on('click', function () {
        var data = '', labels = '';
        $.ajax({
            url: url,
            type: "POST",
            data: data,
            async: isAsync,
            success: function (result) {
               result = JSON.parse(result);
               labels = result['labels'];
               data = result['data'];
            }
        });
        dynamicDataAppendOnChart(labels, data); // Now you can call the function by passing labels and data
    });

    function dynamicDataAppendOnChart() {
        $('#chartbtc').remove();
        $('#appendTheCanvasElement').append('<canvas id="chartbtc" class="canvasChart"><canvas>'); // This would create new canvas element every time and removes the older one.
        var ctx = document.getElementById("chartbtc");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [labels],
                datasets: [{
                    label: 'Market Price (USD)',
                    data: [data],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: false
                        }
                    }]
                }
            }
        });
    }
</script>

Answer 3

试试这个。将标签和数据声明为

var labels = result['labels'].split(","); // Return Array of Strings Of labels
var data =   JSON.parse("[" +  result['data'] + "]");// return array of data

恰克

labels: [labels],
data: [data],

到

labels: labels,
    data: data,

因为它已经在数组

中

Chart.js传递价值数据动态

3 个答案: