สร้างแผนภูมิแบบโต้ตอบใน Ionic 2

Sep 17, 2025

วิธีการ

เมื่อคุณทำงานในทีมเล็ก ๆ มันมีแนวโน้มที่จะเขียนและบำรุงรักษารหัสแยกต่างหากสำหรับ Android, iOS และ Windows นั่นคือที่ที่เฟรมเวิร์กไฮบริดเช่นไอออนิกเข้ามาในภาพ พวกเขาไม่เพียง แต่ช่วยให้เราสามารถเขียนโค้ดชิ้นเดียวที่สามารถใช้ได้กับทั้งสามแพลตฟอร์ม แต่หมายความว่าเราสามารถทำได้ดังนั้นการใช้สแต็กเทคที่มีอยู่ของเรา

ในบทช่วยสอนนี้เรากำลังจะสำรวจวิธีจัดการกับงานทั่วไปเช่นการสร้างภาพข้อมูลใน Ionic 2 ซึ่งเป็นหนึ่งในกรอบแอพไฮบริดที่มีแนวโน้มมากที่สุดที่มี ฉันจะใช้ไลบรารีแผนภูมิ FusionCharts JavaScript (FusionCharts.com) สำหรับโครงการนี้เนื่องจากมีห้องสมุดขนาดใหญ่กว่า 90 ชาร์ตนั้นเข้ากันได้กับทุกอุปกรณ์และเบราว์เซอร์และใช้งานได้ง่ายมาก

การตั้งค่า Ionic 2

ในการพัฒนาแอพด้วย Ionic 2 คุณต้องมี node.js เวอร์ชัน 4+ และ NPM ทำงานบนระบบปฏิบัติการของคุณ คุณสามารถดาวน์โหลดแพ็คเกจ node.js จาก nodejs.org/en/download และ NPM จะถูกติดตั้งพร้อมกับมัน หากคุณมี node.js รุ่นที่แตกต่างกันแล้วและต้องการเรียกใช้เวอร์ชัน 4+ เช่นกันคุณสามารถทำได้ผ่าน ผู้จัดการรุ่นโหนด .

ถัดไปคุณต้องติดตั้ง Ionic 2 Beta โดยใช้ NPM ทำสิ่งนี้ให้ทำงาน การติดตั้ง NPM -G Ionic @ Beta ในเทอร์มินัลของคุณจากบัญชีผู้ใช้ที่มีสิทธิ์รูท (เรากำลังติดตั้งโมดูลทั่วโลก) หากต้องการจำลองแอพอิออนเรากำลังสร้างในหลายแพลตฟอร์มเราต้องมีอีกหนึ่งโหนดโมดูล: คอร์โดวา . คุณสามารถติดตั้งได้โดยใช้ทั่วโลก การติดตั้ง NPM -G Cordova .

ขณะนี้เราพร้อมที่จะสร้างแอป Ionic แรกของเราแล้ว อย่างไรก็ตามด้วยการตั้งค่านี้เราจะสามารถดูแอปพลิเคชันในเบราว์เซอร์ได้เท่านั้น ในการจำลองแอปสำหรับอุปกรณ์ iOS หรือ Android เราต้องสร้างโมดูลแพลตฟอร์มที่เฉพาะเจาะจงกับ Cordova ในบทช่วยสอนนี้เราจะสร้างโมดูล iOS ดังนั้นคุณต้องทำงาน แพลตฟอร์มไอออนิกเพิ่ม iOS .

ในที่สุดคุณต้องติดตั้ง Xcode คุณจะพบคำแนะนำสำหรับสิ่งนี้ ที่นี่ .

การสร้างแอพ Ionic 2

ในการกวดวิชานี้เราจะสร้างแอพ Ionic 2 ชื่อ 'แผนภูมิ' เราจะสร้างโฟลเดอร์ 'แผนภูมิ' ในไดเรกทอรีการทำงานปัจจุบันของคุณและ Bootstrap แอปด้วยแอปพลิเคชันตัวอย่าง แอปตัวอย่างจะมีหน้าพื้นฐานตามที่อธิบายไว้ที่นี่

ในการสร้างแอปนี้ให้ทำงาน แผนภูมิเริ่มต้น Ionic --v2 ในไดเรกทอรีการทำงานปัจจุบัน ( ชาร์ต เป็นชื่อของแอพและ --v2 บอกไอออนิกเราต้องการสร้างแอพ Ionic 2) ในการดำเนินการของคำสั่งนี้ ชาร์ต โฟลเดอร์จะถูกสร้างขึ้นในไดเรกทอรีการทำงานปัจจุบัน ในการทดสอบแอปในเบราว์เซอร์ให้ไปที่ ชาร์ต โฟลเดอร์และวิ่ง ไอออนิกให้บริการ . สิ่งนี้จะเปิดแอปในเบราว์เซอร์เริ่มต้นของคุณ

การเพิ่มหน้าใหม่

ตอนนี้ลองเพิ่มหน้า / ส่วนประกอบให้กับ ชาร์ต แอปพลิเคชันที่จะสร้างแผนภูมิ JavaScript ก่อนอื่นเราจะเพิ่มหน้า HTML อย่างง่ายด้วย 'Hello World' ในนั้น

ใน Ionic 2 หน้าสามารถเพิ่มไปยังแอป Ionic โดยใช้ @หน้า มัณฑนากร (โมดูลไอออนิกตามส่วนประกอบ 2 เชิงมุม) ซึ่งมีการเข้าถึงฟังก์ชั่นอิออนที่สมบูรณ์ หน้ากระดาษขั้นต่ำที่เปลือยเปล่าต้องใช้ไฟล์ HTML เทมเพลต (ซึ่งมีเครื่องหมายมาร์กอัป) และไฟล์ JavaScript (ที่มีตรรกะต้องการ) คุณสามารถค้นหารายละเอียดเพิ่มเติมเกี่ยวกับหน้าไอออนิก ที่นี่ .

ในการสร้างหน้าเว็บที่เราจะเพิ่ม Donut-Chart.js และ Donut-Chart.html ไฟล์ไปที่ แผนภูมิ / แอป / เพจโดนัทแผนภูมิ ไดเรกทอรี. ในไฟล์ HTML เราสามารถเพิ่มรหัสสำหรับการนำทางของแอปและหัวข้อ 'Hello World' ที่เรียบง่าย:

 & lt; ion-navbar * navbar & gt;
& lt; ปุ่ม menutoggle & gt;
  & lt; ไอออนไอคอนชื่อ = "เมนู" & gt; & lt; / ไอคอนไอคอน & gt;
& lt; / ปุ่ม & gt;
& lt; ion-title & gt; hello ionic & lt; / ion-title & gt;
& lt; / ion-navbar & gt;

& lt; ไอออนเนื้อหา & gt;
  & lt; H1 & GT; Hello World & Lt; / Div & GT;
& lt; / ไอออนเนื้อหา & gt;

ในไฟล์ JavaScript เราอ้างอิงไฟล์ HTML ที่สร้างเป็นเทมเพลตสำหรับคอมโพเนนต์นี้ เนื่องจากเราไม่ได้ทำอะไรเลยฉันก็สามารถเพิ่มตัวสร้างที่ว่างเปล่าได้ แผนภูมิ .

 นำเข้า {หน้า} จาก 'ไอออนิกเชิงมุม';

@หน้า({
  Templateurl: 'Build / Pages / Pie-Chart / Pie-Chart.html'
})

การส่งออกคลาส Chartpage {
  Constructor () {
  }
}

เราเพิ่งสร้างองค์ประกอบแบบสแตนด์อโลน ตอนนี้เราต้องเชื่อมโยงสิ่งนี้เข้ากับแอพหลัก ในการทำเช่นนี้เราจำเป็นต้องอ้างอิงส่วนประกอบที่เราสร้างขึ้นใน app.js ไฟล์ในโฟลเดอร์แอปและใช้ส่วนประกอบใน หน้า คุณสมบัติของตัวสร้างคอมโพเนนต์แอป

 นำเข้า {แผนภูมิ} จาก './pages/donut-chart/donut-chart'

ตัวสร้าง (แอปแพลตฟอร์มเมนู) {
    // ตัวสร้างแอปเริ่มต้น
    แอปนี้. App =;
    สิ่งนี้ platform = แพลตฟอร์ม;
    เมนูนี้ = เมนู;
    this.inializeapp ();
    // ตั้งค่าหน้าของแอปของเรา - เรากำลังเพิ่มแผนภูมิโดนัทที่นี่
    นี้. pages = [
      {ชื่อเรื่อง: 'ยินดีต้อนรับ', ส่วนประกอบ: helloionicpage},
      {ชื่อเรื่อง: 'แผนภูมิโดนัท', ส่วนประกอบ: แผนภูมิ}
    ];

    // ทำให้หน้า helloionicpage รูต (หรือก่อน) หน้า - ขั้นตอนเริ่มต้น
    this.rootpage = helloionicpage;
}

หลังจากทำการเปลี่ยนแปลงเหล่านี้แอปอิออนในเบราว์เซอร์ควรโหลดอัตโนมัติ (หรือใช้ไอออนิกรับใช้จากเทอร์มินัลอีกครั้ง) ตอนนี้ลิงก์ใหม่ควรมองเห็นได้ในเมนูด้านข้างของแอพและคลิกที่คุณควรเห็น 'Hello World' ที่เขียนบนหน้าจอ

การสร้างแผนภูมิ JavaScript

ตอนนี้ถึงเวลาที่จะปรับเปลี่ยนหน้า 'Hello World' ของเราเพื่อสร้างแผนภูมิโดนัท เพื่อให้สามารถใช้ห้องสมุด FusionCharts เราต้องรวมถึง FusionCharts.js และ FusionCharts.charts.js ไฟล์ใน www / index.html ไฟล์.

เคล็ดลับด่วน: หากทั้งไฟล์อยู่ในโฟลเดอร์เดียวกันแล้วเพิ่ม FusionCharts.js จะเพียงพอเนื่องจากจะรวมถึงโดยอัตโนมัติ FusionCharts.charts.js .

 & lt; สคริปต์ type = "text / javascript" src = "path / to / fusioncharts.js" & gt; & lt; / script & gt;

ตอนนี้เราจะแก้ไข HTML จากขั้นตอนก่อนหน้าเพื่อสร้างแผนภูมิคอนเทนเนอร์:

 & lt; div id = "แผนภูมิภาชนะ" & gt; & lt; / div & gt;

ในตัวสร้างใน Donut-Chart.js ซึ่งเราสร้างขึ้นข้างต้นเราต้องเพิ่มรหัสต่อไปนี้เพื่อสร้างแผนภูมิภายในคอนเทนเนอร์แผนภูมิ:

 FusionChart.Ready (ฟังก์ชั่น () {
  var revenuechart = fusioncharts ใหม่ ({
    ประเภท: 'doughnut2d',
    Renderat: 'ภาชนะบรรจุ'
    ความกว้าง: '100%',
    ความสูง: '450',
    DataFormat: 'JSON'
    แหล่งข้อมูล: {
      "แผนภูมิ": {
        "คำบรรยาย": "แยกรายได้ตามหมวดหมู่ผลิตภัณฑ์"
        "การย่อย": "ปีที่แล้ว",
        "NumberPrefix": "$"
        "PaletteColors": "# 0075C2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // แอตทริบิวต์แผนภูมิเพิ่มเติม
      },
      "ข้อมูล": [{
          "ฉลาก": "อาหาร"
          "ค่า": "28504"
        } // ข้อมูลเพิ่มเติม
      ]
    }
  }) การแสดงผล ();
});

ในรหัสนี้เรากำลังสร้างแผนภูมิใหม่ผ่านตัวสร้าง FusionCharts คุณสมบัติที่ใช้ถูกอธิบายสั้น ๆ ด้านล่าง:

ประเภท กำหนดประเภทของแผนภูมิ

แสดงให้เห็น เป็น ID ของคอนเทนเนอร์ที่เราต้องการแสดงแผนภูมิ

ความกว้าง และ ความสูง ใช้เพื่อตั้งค่าแผนภูมิมิติ

DataFormat เป็นรูปแบบที่เรากำลังจะป้อนข้อมูลแผนภูมิ (คุณสามารถใช้ JSON เช่นเดียวกับ XML)

แหล่งข้อมูล มีเครื่องสำอางแผนภูมิภายใน FusionCharts แผนภูมิ วัตถุและข้อมูลจริงที่จะพล็อตภายใน ข้อมูล อาเรย์

แม้ว่าฉันจะแสดงเพียงสี่คุณลักษณะใน แผนภูมิ วัตถุมีมากกว่าร้อยคนอื่น ๆ ที่คุณสามารถใช้เพื่อปรับปรุงการออกแบบของแผนภูมิของคุณ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนั้น ที่นี่ .

เมื่อเพิ่มรหัสนี้ให้ทำงาน ไอออนิกให้บริการ เพื่อเปิดโปงแอปใหม่ คุณควรเห็นลิงก์ 'แผนภูมิโดนัท' ในเมนูด้านข้างของคุณ หากคุณทำตามขั้นตอนทั้งหมดของฉันอย่างถูกต้องเมื่อคุณคลิกลิงค์นั้นคุณควรเห็นแผนภูมิโดนัท! ถ้าไม่โปรดอ้างอิงรหัสใน GitHub Repo สำหรับโครงการนี้ เพื่อดูว่าคุณผิดพลาดที่ไหน

หมายเหตุ: หลังจากตรวจสอบในเบราว์เซอร์ให้ใช้ ไอออนิกเลียนแบบ iOS ในการโหลดแอปของคุณใน iOS Simulator

สรุป

Our doughnut chart representing the revenue split of a hypothetical company by product categories — แผนภูมิโดนัทของเราแสดงถึงการแบ่งแยกรายได้ของ บริษัท สมมุติตามหมวดหมู่ผลิตภัณฑ์

ตามที่คุณเพิ่งเห็นมันไม่ใช่เรื่องยากที่จะเริ่มต้นกับการสร้างภาพข้อมูลใน Ionic 2 แม้ว่าฉันเพิ่งทำแผนภูมิโดนัทที่เรียบง่ายเพื่อแสดงให้เห็นถึงกระบวนการ แต่เป็นไปได้ที่จะสร้างแผนภูมิที่ซับซ้อนด้วยชุดข้อมูลหลายชุดโดยใช้กระบวนการเดียวกัน . สิ่งเดียวที่คุณต้องหาคือรูปแบบที่ FusionCharts ยอมรับข้อมูลสำหรับประเภทแผนภูมินั้น เมื่อคุณสามารถทำเช่นนั้นคุณจะสามารถทำแผนภูมิใด ๆ จากไลบรารี

หากคุณต้องการความช่วยเหลือใด ๆ กับหัวข้อนี้หรือหากคุณมีคำถามใด ๆ เกี่ยวกับเนื้อหาของบทช่วยสอนนี้อย่าลังเลที่จะจับฉัน บนทวิตเตอร์ .ฉันมีความสุขเสมอที่จะช่วย!

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 283; ซื้อที่นี่ .

สร้างแผนภูมิแบบโต้ตอบใน Ionic 2

การตั้งค่า Ionic 2

การสร้างแอพ Ionic 2

การเพิ่มหน้าใหม่

การสร้างแผนภูมิ JavaScript

สรุป

วิธีการ - บทความยอดนิยม

วิธีการถ่ายภาพหน้าจอบน Mac

สร้างมุมมองใน Adobe Illustrator

วิธีเปลี่ยนวันในตอนกลางคืนใน Photoshop

วิธีการสร้างเลย์เอาต์ที่ซับซ้อนโดยใช้ CSS

ออกแบบกราฟิก SVG ในเบราว์เซอร์ของคุณ

วิธีการเตรียมกราฟิก Illustrator สำหรับ After Effects

ทาสีฉากนิวยอร์กมหากาพย์

สร้างแปรงสติกเกอร์ที่กำหนดเองใน Artrage

หมวดหมู่