javascript चार्टजे-बहु अक्ष रेखा चार्ट-अपरिभाषित की संपत्ति 'मिनट' पढ़ नहीं सकते



ajax vue.js (1)

scales और yAxisID मानों के बिना नीचे कोड yAxisID , यह एक ही अक्ष पर दोनों पंक्तियों के साथ एक 2 लाइन चार्ट प्रदान करता है

अद्यतन करें: जब केवल कोड से yAxisID मान निकालते हैं तो यह बिना किसी त्रुटि के पहले चलाता है - हालांकि अभी भी केवल एक y अक्ष के साथ

विभाजित अक्ष पाने के लिए इन तत्वों को जोड़ते समय, यह रिटर्न देता है कि जेएस त्रुटि अपर्याप्त की cannot read property 'min' of undefined और कैनवास रिक्त है।

सुनिश्चित नहीं हैं कि उसे एक अंतर करना चाहिए, लेकिन data एक जेसन ऑब्जेक्ट है जो एजेक्स अनुरोध के माध्यम से एक vue.js विधि के माध्यम से वापस आ गया है।

ब्राउज़र कंसोल में data.sales चर कैसे दिखता है इसका उदाहरण यहां दिया गया है:

बिक्री: (187) [0, 0, 43.2874, 10.276, ..., 23.834]

var ctx = document.getElementById("chart_canvas").getContext('2d')

    var basic_line = new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.labels,
        datasets: [{
          label: 'Price',
          yAxisID: 'B',
          fill: false,
          borderColor: ["#668cff"],
          data: data.price
        }, {
          label: 'Sales',
          yAxisID: 'A',
          fill: false,
          borderColor: ["grey"],
          data: data.sales
        }],
        options: {
          scales: {
            yAxes: [{
              id: 'A',
              position: 'left',
              type: 'linear' 
            }, {
              id: 'B',
              position: 'right',
              type: 'linear'
            }]
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    })

यह मुद्दा केवल इस तथ्य के कारण होता है कि, आपने data ऑब्जेक्ट के अंदर ऑब्जेक्ट ऑब्जेक्ट / प्रॉपर्टी को रखा है, जबकि इसे बाहर होना चाहिए।

यहां आपके कोड का संशोधित संस्करण है:

var ctx = document.getElementById("chart_canvas").getContext('2d')

var basic_line = new Chart(ctx, {
   type: 'line',
   data: {
      labels: data.labels,
      datasets: [{
         label: 'Price',
         yAxisID: 'B',
         fill: false,
         borderColor: ["#668cff"],
         data: data.price
      }, {
         label: 'Sales',
         yAxisID: 'A',
         fill: false,
         borderColor: ["grey"],
         data: data.sales
      }]
   },
   options: {
      scales: {
         yAxes: [{
            id: 'A',
            position: 'left',
            type: 'linear'
         }, {
            id: 'B',
            position: 'right',
            type: 'linear'
         }]
      },
      responsive: true,
      maintainAspectRatio: false
   }
});




chart.js