Блог

Я использую Chart.js и я хочу извлечь данные из свойств внутри элемента DIV.

Я могу получать данные в data-gpget и. data-gpret Он записывает данные в консоль, но не видит их как данные «data».

data: getATT('#graph3','data-gpval') и data: getATT('#graph3','data-gpret') что может быть причиной этого? Чего мне не хватает? Спасибо.

 <div id="graph3" data-gpget="[28,12,14,27,11]" data-gpret="[21,64,32,73,76]"> 
  <canvas id="js-chartjs-earnings"></canvas>
</div>
 

JS:

 function getATT(id,value) {
   return $(id).attr(value);
}



return e = a, t = [{
                key: "initCharts", value: function () {
Chart.defaults.scale.gridLines.color = "transparent", Chart.defaults.scale.gridLines.zeroLineColor = "transparent", Chart.defaults.scale.ticks.beginAtZero = !0, Chart.defaults.global.elements.line.borderWidth = 0, Chart.defaults.global.elements.point.radius = 0, Chart.defaults.global.elements.point.hoverRadius = 0, Chart.defaults.global.tooltips.cornerRadius = 3, Chart.defaults.global.legend.labels.boxWidth = 12;
                    var r, a = jQuery(".js-chartjs-earnings");
                    r = {
                        labels: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
                        datasets: [{
                            label: "GETTING",
                            fill: !0, 
                            data: getATT('#graph3','data-gpget')
                        }, {
                            label: "RETURNS",
                            fill: !0,
                            data: getATT('#graph3','data-gpret')
                        }]
                    }, a.length amp;amp; new Chart(a, {
                        type: "bar",
                        data: r,
                        options: {
                            tooltips: {
                                intersect: !1, callbacks: {
                                    label: function (r, a) {
                                        return a.datasets[r.datasetIndex].label   ": $"   r.yLabel
                                    }
                                }
                            }
                        }
                    })
                }
            }, {
                key: "init", value: function () {
                    this.initCharts()
                }
            }], null amp;amp; r(e.prototype, null), t amp;amp; r(e, t), a
 

attr метод всегда будет возвращать строку.
попробуйте data вместо этого использовать метод…

 return $(id).data(value);
 

просто не забудьте удалить data- префикс из имен атрибутов.

смотрите / запустите следующий пример…

 var testATT = getATT('#graph3','data-gpget');
var testData = getData('#graph3','gpget');
console.log(typeof testATT, testATT);
console.log(typeof testData, testData);

function getData(id,value) {
   return $(id).data(value);
}
function getATT(id,value) {
   return $(id).attr(value);
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="graph3" data-gpget="[28,12,14,27,11]" data-gpret="[21,64,32,73,76]"> 
  <canvas id="js-chartjs-earnings"></canvas>
</div>