تحليل القيم من ملف JSON الخارجي باستخدام Chart.js

1

لقد قمت بإنشاء مخطط دائري بسيط باستخدام Chart.js. أريد ربط هذا بملف JSON على جهاز الكمبيوتر الخاص بي ، والموجود في نفس المجلد المحلي. أريد بعد ذلك أن تظهر البيانات من ملف JSON في الرسم البياني الدائري بدلاً من أخذها مباشرةً من النص البرمجي.

كيف أذهب عن القيام بذلك؟ هذا هو رمزي. 

  <script>
    var ctx = document.getElementById("myDoughnutChart");
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
            data: {
                labels: ["Blue", "Red", "Green", "Orange", "Light Blue"],
            datasets: [{
                backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF"],
                    data: [12, 19, 3, 5, 2],
                    }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                showAllTooltips: true,
                title: {
                    display: true,
                    text: "Responsive test"
                    },
                legend: {
                    display: false,
                    fullWidth: true,
                    labels: {
                    boxWidth: [50]
                    },
                }
            }
        });
    </script>

هذا هو ملف JSON الخاص بي ، والذي تم حفظه ضمن "chart.json" - لست متأكدًا مما إذا كان هذا هو التنسيق الصحيح لأنني مبتدئ حقيقي في هذا الأمر. 

{"jsonarray": [{
    "Color": "Blue",
    "Value": 12}, 
    {
    "Color": "Red",
    "Value": 19}, 
    {
    "Color": "Green",
    "Value": 3}, 
    {
    "Color": "Orange",
    "Value": 5}, 
    {
    "Color": "Light Blue",
    "Value": 2}]
};

أتفهم الحاجة إلى تحليل ملف JSON ولكن ليس لدي أي فكرة عن كيفية القيام بذلك - شكرًا جزيلًا مقدمًا.

2 الاجابة

0

هناك جزءان هنا.

الخطوة الأولى: تحميل JSON من ملف

أحب استخدام الجلب . إذا كنت تستخدم jQuery ، يمكنك أيضًا استخدام $ .ajax . بافتراض أن الملف موجود في نفس الدليل مثل كود JS الخاص بك ويتم تسميته chart.json : 

  fetch('./chart.json')
    .then(function (response) {
      return response.json();
    }).then(function (json) {
      // drawChart fn to be created...see below
      drawChart(json);
    }).catch(function (error) {
      console.error(error);
    });

لاحظ أنه إذا كنت تقوم بتشغيل هذا الرمز محليًا ، فربما تحصل على خطأ حول CORS إذا حاولت زيارة موقع الويب مباشرة من نظام الملفات (مثل file:///<path-to-file>/index.html ).

بدلاً من ذلك ، يمكنك تشغيل خادم محلي بسهولة. انتقل إلى الدليل الذي يحتوي على ملفك في طرفية الخاص بك ، وقم بتشغيل: 

python -m SimpleHTTPServer 8000

أو 

php -S localhost:8000

يخدم هذا الدليل الحالي على المنفذ 8000. ثم قم بزيارة http: // localhost: 8000 /

تأكد أيضًا من أن JSON صالح (لا توجد فاصلة منقوطة في النهاية!).

الخطوة الثانية: تحليل استجابة JSON

نحن نحاول عمل مصفوفتين. واحد بأرقام للبيانات والآخر بسلاسل للملصقات.

يمكنك القيام بذلك بسهولة مع الخريطة : 

var graphData = json.jsonarray.map(e => e.Color);
// ["Blue", "Red", "Green", "Orange", "Light Blue"]
var graphLabels = json.jsonarray.map(e => e.Value);
// [12, 19, 3, 5, 2]

الخطوة الثالثة: اجمعها معًا 

window.addEventListener("DOMContentLoaded", draw);
function draw() {
  // Get the json file with fetch or $.ajax
  // Pass the json data to drawChart
}
function drawChart(jsonData) {
  /* get graphData and graphLabels
  draw chart with your existing code
  pass graphData and graphLabels in place of
  the hard-coded labels and data in your Chart initialization */
}

توسيع الفكرة:

يدعم هذا الرمز الآن مجموعة بيانات واحدة فقط. ال backgroundColor المصفوفة ثابتة ، لذلك إذا لم يكن لديك 5 قيم بالضبط ، فإن بعض ألوان الخلفية ستكون الرمادي الافتراضي لـ ChartJS.

يمكنك أيضًا تجريد رمز الرسم لدعم مجموعات بيانات متعددة وحتى إنشاء ألوان بشكل عشوائي لتتناسب مع عدد المجموعات إذا كنت بحاجة إليها. فقط قم بتبديل القيم المشفرة حسب الحاجة مع المتغيرات التي تنشئها من مجموعة البيانات الخاصة بك. نأمل أن يساعدك هذا على البدء!

:مؤلف
مشاركة الرابط
0

ملفات json هي في الغالب من نوع السلسلة الزمنية ، لذا فإن الرسم البياني الذي تريد إنشاؤه أعتقد أنه يحتاج إلى نوع من نوع الرقم ، لذا فأنت بحاجة إلى تحويل بيانات JSON الخاصة بك إلى فحص وقت رقمي هنا ، إذا كنت تقوم بتحليل JSON بشكل صحيح هنا كيف أجاب بالفعل ، ستكون على ما يرام.

:مؤلف
مشاركة الرابط

أسئلة ذات صلة

أسئلة شائعة:

علامات السؤال:
chart.js
فوق
قائمة طعام