ฉันต้องการสร้างแผนภูมิวงกลมใน JavaScript ในการค้นหาฉันพบ Google Charts API เนื่องจากเรามีการใช้ jQuery ผมพบว่ามีการรวม jQuery สำหรับ Google แผนภูมิใช้ได้

แต่ปัญหาของฉันคือข้อมูลจริงถูกส่งไปยังเซิร์ฟเวอร์ของ Google เพื่อสร้างแผนภูมิ มีวิธีป้องกันไม่ให้ส่งข้อมูลไปยัง Google หรือไม่? ฉันกังวลเกี่ยวกับการส่งข้อมูลของฉันไปยังบุคคลที่สาม

jqPlotดูดีทีเดียวและเป็นโอเพ่นซอร์ส

นี่คือลิงค์ไปยังตัวอย่าง jqPlot ที่น่าประทับใจและทันสมัยที่สุด

Flot

ข้อ จำกัด : เส้นจุดพื้นที่เติมแท่งวงกลมและการรวมกันของสิ่งเหล่านี้

จากมุมมองของการปฏิสัมพันธ์ Flot jQueryไกลโดยคุณจะได้รับใกล้เคียงเป็นไปได้ที่จะแฟลชกราฟที่คุณจะได้รับกับ ในขณะที่ผลลัพธ์ของกราฟค่อนข้างเรียบเนียนและดูดีคุณยังสามารถโต้ตอบกับจุดข้อมูลได้ สิ่งที่ฉันหมายถึงคือคุณสามารถวางเมาส์เหนือจุดข้อมูลและรับผลตอบกลับด้วยภาพเกี่ยวกับค่าของจุดนั้นในกราฟได้

Flot เวอร์ชันลำตัวรองรับแผนภูมิวงกลม

ความสามารถของ Flot Zoom

นอกจากนี้คุณยังสามารถเลือกส่วนของกราฟเพื่อรับข้อมูลกลับสำหรับ "โซน" ที่ต้องการได้อีกด้วย ในฐานะคุณสมบัติรองของ "การแบ่งเขต" นี้คุณยังสามารถเลือกพื้นที่บนกราฟและซูมเข้าเพื่อดูจุดข้อมูลให้ใกล้ขึ้นอีกเล็กน้อย เจ๋งมาก .

ประกายไฟ

ข้อ จำกัด : พายเส้นบาร์ชุดค่าผสม

Sparklines เป็นเครื่องมือสร้างกราฟขนาดเล็กที่ฉันโปรดปราน เหมาะมากสำหรับกราฟสไตล์แดชบอร์ด (ลองนึกถึงแดชบอร์ด Google Analytics ในครั้งต่อไปที่คุณเข้าสู่ระบบ) เนื่องจากมีขนาดเล็กมากจึงสามารถรวมไว้ในบรรทัดได้ (ดังตัวอย่างด้านบน) อีกหนึ่งความคิดที่ดีที่สามารถใช้กับปลั๊กอินการสร้างกราฟทั้งหมดคือความสามารถในการรีเฟรชตัวเอง การสาธิตความเร็วเมาส์ของพวกเขาแสดงให้คุณเห็นถึงพลังของการสร้างแผนภูมิแบบสดที่ดีที่สุด

แผนภูมิแบบสอบถาม 0.21

ข้อ จำกัด : พื้นที่เส้นบาร์และการรวมกันของสิ่งเหล่านี้

jQuery Chart 0.21 ไม่ใช่ปลั๊กอินการสร้างแผนภูมิที่ดูดีที่สุดที่จะต้องพูด มันค่อนข้างพื้นฐานในการใช้งานเมื่อพูดถึงแผนภูมิที่สามารถจัดการได้ แต่ก็สามารถยืดหยุ่นได้หากคุณสามารถทุ่มเทเวลาและความพยายามลงไปได้

การเพิ่มค่าลงในแผนภูมินั้นค่อนข้างง่าย:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

ข้อ จำกัด : Bar, Line

jQchart เป็นสิ่งที่แปลกพวกเขาสร้างขึ้นในการถ่ายโอนภาพเคลื่อนไหวและฟังก์ชันการลาก / วางลงในแผนภูมิอย่างไรก็ตามมันค่อนข้างเกะกะเล็กน้อยและดูเหมือนไม่มีจุดหมาย มันสร้างแผนภูมิที่ดูดีหากคุณCSSตั้งค่าได้ถูกต้อง แต่มีสิ่งที่ดีกว่านั้น

TufteGraph

ข้อ จำกัด : บาร์และบาร์แบบเรียงซ้อน

Tuftegraph ขายตัวเองเป็น "กราฟแท่งสวย ๆ ที่คุณจะแสดงให้แม่เห็น" ใกล้เข้ามาแล้ว Flot สวยกว่า แต่ Tufte ให้ยืมตัวเองให้มีน้ำหนักเบามาก แม้ว่าจะมีข้อ จำกัด ดังกล่าว แต่ก็มีตัวเลือกให้เลือกน้อยดังนั้นคุณจะได้รับสิ่งที่คุณได้รับ ลองดูกราฟแท่งชนะอย่างรวดเร็ว

คำแนะนำดีๆมากมายที่นี่เพียงแค่โยนZingChartลงในกองเพื่อการวัดที่ดี เราเพิ่งเปิดตัวjQuery wrapperสำหรับไลบรารีที่ช่วยให้สร้างและปรับแต่งแผนภูมิได้ง่ายยิ่งขึ้น ลิงค์ CDN อยู่ในการสาธิตด้านล่าง

ฉันอยู่ในทีม ZingChart และเราพร้อมที่จะตอบคำถามที่คุณอาจมี!

$('#pie-chart').zingchart({
  "data": {
    "type": "pie",
    "legend": {},
    "series": [{
      "values": [5]
    }, {
      "values": [10]
    }, {
      "values": [15]
    }]
  }
});

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>

<div id="pie-chart"></div>

อีกสองสามรายการที่ไม่ได้กล่าวถึง:

สำหรับมินิพายเส้นและบาร์Peityนั้นยอดเยี่ยมเรียบง่ายเล็กเร็วใช้มาร์กอัปที่หรูหราจริงๆ

ฉันไม่แน่ใจว่าเป็นความสัมพันธ์กับ Flot (ตามชื่อ) แต่Flotr2ค่อนข้างดีแน่นอนว่าพายได้ดีกว่า Flot

Bluffสร้างกราฟเส้นที่ดูดี แต่ฉันมีปัญหากับพายของมันเล็กน้อย

ไม่ได้เป็นสิ่งที่ผมหลัง แต่อีกหนึ่งผลิตภัณฑ์ในเชิงพาณิชย์ (เหมือน Highcharts) เป็นTeeChart

Chart.jsมีประโยชน์มากรองรับแผนภูมิประเภทอื่น ๆ อีกมากมายเช่นกัน

สามารถใช้ได้ทั้งกับ jQuery และไม่มี

มีผู้เล่นใหม่ในสนามที่นำเสนอแผนภูมิการนำทางขั้นสูงที่ใช้ Canvas สำหรับภาพเคลื่อนไหวและประสิทธิภาพที่ราบรื่นเป็นพิเศษ:

https://zoomcharts.com/

ตัวอย่างแผนภูมิ:

เอกสารประกอบ: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

สิ่งที่ยอดเยี่ยมเกี่ยวกับ lib นี้:

• ชิ้นอื่น ๆ สามารถขยายได้
• Pie นำเสนอการเจาะลึกสำหรับโครงสร้างลำดับชั้น (ดูตัวอย่าง)
• เขียนตัวควบคุมแหล่งข้อมูลของคุณเองได้อย่างง่ายดายหรือจัดเตรียมไฟล์ json แบบธรรมดา
• ส่งออกภาพความละเอียดสูงนอกกรอบ
• รองรับการสัมผัสเต็มรูปแบบทำงานได้อย่างราบรื่นบน iPad, iPhone, Android และอื่น ๆ

แผนภูมิให้บริการฟรีสำหรับการใช้งานที่ไม่ใช่เชิงพาณิชย์ใบอนุญาตเชิงพาณิชย์และการสนับสนุนทางเทคนิคที่มีให้เช่นกัน

นอกจากนี้ยังมีแผนภูมิเวลาแบบโต้ตอบและแผนภูมิสุทธิให้คุณใช้

แผนภูมิมาพร้อมกับ API และการตั้งค่าที่ครอบคลุมดังนั้นคุณจึงสามารถควบคุมทุกแง่มุมของแผนภูมิได้

ตรวจสอบTeeChart สำหรับ Javascript

• ฟรีสำหรับการใช้งานที่ไม่ใช่เชิงพาณิชย์

• รวมปลั๊กอินสำหรับjQuery , Node.js, WordPress, Drupal, Joomla, ไมโครซอฟท์ typescript ฯลฯ ...

• การสาธิตการโต้ตอบที่นี่และที่นี่

• ภาพหน้าจอบางส่วนของการสาธิตบางส่วน: