สร้างกราฟง่ายๆ ใน 1 นาที

สร้างกราฟพล็อตกระจายอย่างง่ายใน 2 นาที ApexCharts

ในขณะที่ทำการค้นคว้าเชิงตัวเลขและการเขียนโค้ดใน javascript เป็นจำนวนมาก การใช้ Numbers/Excel/Matlab เพื่อแสดงภาพข้อมูลที่สร้างด้วยโค้ดอย่างรวดเร็วกลายเป็นเรื่องยุ่งยาก

หลังจากท่องเน็ตมาสักพัก เราก็พบโปรเจ็กต์โอเพ่นซอร์สที่ยอดเยี่ยม ApexCharts

ApexCharts เป็นไลบรารีจาวาสคริปต์ที่นำเข้าไปยังหน้า HTML ของคุณได้อย่างง่ายดาย

มีแผนภูมิประเภทต่างๆ มากมาย คล้ายกับ Excel แต่ดูดีกว่า

นี่คือตัวอย่างของแผนภูมิพล็อต กระจาย โดยที่แกน x คือเส้นรอบวงของสี่เหลี่ยม และแกน y คือพื้นที่ของสี่เหลี่ยมเดียวกัน

กราฟสามารถปรับให้เป็นข้อมูลและการกำหนดค่าใหม่ได้อย่างง่ายดาย แก้ไข ตัวเลือกตัวแปร.

var options = {
          series: [{
          name: "Perimeter vs Area of rectangle",
          data: myData //is a [[1,3],[1,5]] for example
          }],
        chart: {
          height: 700,
          type: 'scatter', //here you define the type of chart
          zoom: {
            enabled: true,
            type: 'xy'
          }
        },
        xaxis: {
          tickAmount: 10, //the resolution of the ticks
          labels: {
            formatter: function(val) {
              return parseFloat(val).toFixed(1)
            }
          }
        },
        yaxis: {
          tickAmount: 7
        },
        title: {
          text: 'Rectangle area and perimeter', //your title
          align: 'left'
        },
    };

นี่คือหน้า HTML แบบเต็ม คุณจะต้องรวมไฟล์ styles.css และไลบรารี่ด้วย (ซึ่งมีอยู่ใน repo ที่ให้มา)

นี่คือการสาธิต Javascript vanilla บน codeit:

การสาธิตแสดงแผนภาพกระจายของพื้นที่จากการคำนวณของสี่เหลี่ยมผืนผ้าเทียบกับเส้นรอบวง (ในกรณีที่คุณสงสัย ไม่มีความเชื่อมโยงทางพีชคณิตระหว่างทั้งสอง :-))

นี่คือ repo ของเราใน "GitHub"