Chart.js传递值数据动态

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,

因为它已经在数组中