首页 > 解决方案 > 在 Charts.js 中动态添加标签

问题描述

我已经完成了我的图表并且它工作得很好,但是当我试图动态显示标签时我遇到了一些问题。我认为这与“标签”部分有关,但我不太确定。

这是我要修改“标签”数组的代码部分,显示了我在数据库中拥有的信息,而不是我自己输入的值

success:function(response) {
        var Datos = {
            labels: ['', '', '', '', '', '', '', '', '', ''],
            datasets: [
                {
                    fillColor: 'rgba(153,102,255,0.6)',
                    strokeColor: 'rgba(57,194,112,0.7)',
                    highlightFill: 'rgba(153,102,255,0.6)',
                    highlightStroke: 'rgba(66,196,157,0.7)',
                    data: response
                }
            ]
        }
    }

我已经检查了我的浏览器,确实它发送了数据,但我不知道如何动态配置标签。

我怎样才能做到这一点?

标签: phpjsonajaxchart.jsresponsive

解决方案


你在response变量中收到什么?如果您有一组标签,则可以执行以下操作:

success:function(response){

    // Let's assume you got a JSON formatted response
    var labelsArray = JSON.parse(response);

                              var Datos = {
                                    labels : labelsArray,
                                    datasets : [
                                        {
                                            fillColor : 'rgba(153,102,255,0.6)', 
                                            strokeColor : 'rgba(57,194,112,0.7)', 
                                            highlightFill : 'rgba(153,102,255,0.6)', 
                                            highlightStroke : 'rgba(66,196,157,0.7)',
                                            data : response
                                        }

当然,您的“labelsArray”必须是格式正确的数组才能与 Chart.js 一起使用。如果您收到带有索引的对象,您需要使用其他数组函数来创建您的标签数组。


推荐阅读