मेरे पास एक Vue.JS प्रोजेक्ट है जो REST API से डेटा प्राप्त कर रहा है (मेरा, इसलिए यदि आवश्यक हो तो मैं इसे संशोधित कर सकता हूं)। यह डेटा चार्ट.जेएस के लिए स्वरूपित है। मुझे 3 डेटासेट के साथ एक ग्राफ प्रदर्शित करना है, एक ही एक्स मानों के साथ 2 टाइप लाइन, लेकिन विभिन्न एक्स मानों के साथ टाइप बार का 1 (यही कारण है कि मैं लेबल निर्दिष्ट नहीं करना चाहता)। जो भी हो, सभी एक्स मान तिथियां हैं, इसलिए मुझे सभी वक्रों के लिए केवल 1 एक्स अक्ष चाहिए।

मैं (x, y) डेटा प्रारूप के साथ डेटासेट का उपयोग कर रहा हूं:

  • x एक ISO8601 दिनांक है
  • y एक फ्लोट है

मेरी समस्या यह है कि कुछ भी प्रदर्शित नहीं होता है ... क्या कोई मेरी मदद कर सकता है, मुझे समझ में नहीं आता क्यों। मुझे ऐसा लगता है कि मैंने चीजों को सही किया है। मैंने कहीं देखा है कि मुझे मोमेंटज को शामिल करने की आवश्यकता है, लेकिन आधिकारिक दस्तावेज में वे कहते हैं कि ऐसा नहीं है। मैं शर्त लगाता हूं कि समस्याएं तारीखों से आती हैं क्योंकि मैंने y मानों को बदलने की कोशिश की है, और 2 y अक्ष सीमाएं संशोधित की गई हैं (इसलिए y मान समझा जाता है)। मैंने "xAxisID" विकल्प जोड़ने का भी प्रयास किया, कुछ भी नहीं बदला।

यहाँ मेरे डेटा का एक नमूना है (आमतौर पर सैकड़ों मान):

{
  "type": "line",
  "data": {
    "datasets": [
      {
        "label": "Température",
        "borderColor": "red",
        "backgroundColor": "red",
        "fill": false,
        "data": [
          {
            "x": "2020-07-05T15:38:47.933711",
            "y": 2.8224692
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 33.63129
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 40.540405
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 3.0312533
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 49.145626
          }
        ],
        "yAxisID": "yAxeTemperature"
      },
      {
        "label": "Humidité",
        "borderColor": "blue",
        "backgroundColor": "blue",
        "fill": false,
        "data": [
          {
            "x": "2020-07-05T15:38:47.933711",
            "y": 33.980587
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 2.0313625
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 24.249685
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 7.4426904
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 2.6335742
          },
          {
            "x": "2020-07-05T16:28:48.175547",
            "y": 25.92827
          }
        ],
        "yAxisID": "yAxeHumidite"
      }
    ]
  },
  "options": {
    "responsive": true,
    "hoverMode": "index",
    "stacked": false,
    "title": null,
    "scales": {
      "xAxes": [
        {
          "type": "time",
          "display": true,
          "position": "bottom",
          "id": "xAxeTime",
          "scaleLabel": {
            "display": true,
            "labelString": "Temps",
            "fontColor": "black"
          },
          "time": {
            "unit": "minute",
            "parser": "moment.ISO_8601",
            "tooltipFormat": "ll"
          }
        }
      ],
      "yAxes": [
        {
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeTemperature",
          "scaleLabel": {
            "display": true,
            "labelString": "Température",
            "fontColor": "red"
          }
        },
        {
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeHumidite",
          "scaleLabel": {
            "display": true,
            "labelString": "Humidité",
            "fontColor": "blue"
          }
        }
      ]
    }
  }
}

यहां बताया गया है कि मेरा चार्ट कैसे बनाया जाता है (vue-chartjs और चार्ट.js का उपयोग करके):

createChart(chartId : string, chartData : GrapheBean) {
      const ctx = document.getElementById(chartId);
      // @ts-ignore
      const myChart = new Chart(ctx, {
        type: chartData.type,
        data: chartData.data,
        options: chartData.options,
      });
    }

यहाँ परिणाम है:

enter image description here

मैं अब फंस गया हूँ, भले ही अभी भी कम उम्मीद के साथ चीजों की कोशिश कर रहा हूँ। उन लोगों के लिए अग्रिम धन्यवाद जो मेरी मदद कर सकते हैं।

0
zyrion 10 जुलाई 2020, 14:02

1 उत्तर

सबसे बढ़िया उत्तर

सबसे पहले आपको xAxes.time.parser विकल्प को हटाना चाहिए। जब दिनांक ISO8601 प्रारूप की हों तो इसकी आवश्यकता नहीं होती है।

आगे Chart.js समय की कार्यक्षमता के लिए Moment.js का प्रभावी ढंग से उपयोग करता है अक्ष. इसलिए आपको इसके बंडल किए गए संस्करण का उपयोग करना चाहिए चार्ट.जेएस जिसमें एक ही फाइल में मोमेंट.जेएस शामिल है।

कृपया अपने संशोधित कोड को शुद्ध जावास्क्रिप्ट संस्करण में देखें।

const chartData = {
  "type": "line",
  "data": {
    "datasets": [{
        "label": "Température",
        "borderColor": "red",
        "backgroundColor": "red",
        "fill": false,
        "data": [{
            "x": "2020-07-05T15:38:47.933711",
            "y": 2.8224692
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 33.63129
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 40.540405
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 3.0312533
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 49.145626
          }
        ],
        "yAxisID": "yAxeTemperature"
      },
      {
        "label": "Humidité",
        "borderColor": "blue",
        "backgroundColor": "blue",
        "fill": false,
        "data": [{
            "x": "2020-07-05T15:38:47.933711",
            "y": 33.980587
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 2.0313625
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 24.249685
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 7.4426904
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 2.6335742
          },
          {
            "x": "2020-07-05T16:28:48.175547",
            "y": 25.92827
          }
        ],
        "yAxisID": "yAxeHumidite"
      }
    ]
  },
  "options": {
    "responsive": true,
    "hoverMode": "index",
    "stacked": false,
    "title": null,
    "scales": {
      "xAxes": [{
        "type": "time",
        "display": true,
        "position": "bottom",
        "id": "xAxeTime",
        "scaleLabel": {
          "display": true,
          "labelString": "Temps",
          "fontColor": "black"
        },
        "time": {
          "unit": "minute",
          // "parser": "moment.ISO_8601", -> remove this line
          "tooltipFormat": "ll"
        }
      }],
      "yAxes": [{
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeTemperature",
          "scaleLabel": {
            "display": true,
            "labelString": "Température",
            "fontColor": "red"
          }
        },
        {
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeHumidite",
          "scaleLabel": {
            "display": true,
            "labelString": "Humidité",
            "fontColor": "blue"
          }
        }
      ]
    }
  }
}

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
  type: chartData.type,
  data: chartData.data,
  options: chartData.options,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>

अपने प्रश्न में आपने यह भी लिखा था "मुझे 3 डेटासेट के साथ एक ग्राफ प्रदर्शित करना है, 2 समान X मानों के साथ टाइप लाइन के, लेकिन अलग-अलग X मानों के साथ टाइप बार का 1"। हालाँकि आपका कोड केवल 2 डेटासेट को परिभाषित करता है। यदि आप भी इस बिंदु के साथ समस्याओं का सामना कर रहे हैं, तो कृपया इस अलग मुद्दे के लिए एक नया प्रश्न पोस्ट करें।

1
uminder 11 जुलाई 2020, 13:00