คำถามติดแท็ก chart.js

ฉันกำลังใช้แผนภูมิเส้นจากhttp://www.chartjs.org/ เนื่องจากคุณสามารถเห็นค่าสูงสุด (130) และค่าต่ำสุด (60) สำหรับแกน Y ถูกเลือกโดยอัตโนมัติฉันต้องการค่าสูงสุด = 500 และค่าต่ำสุด = 0 เป็นไปได้ไหม

176 chart.js 

ฉันต้องการวาดแผนภูมิแท่งแนวนอนด้วย Chart.js แต่มันยังคงปรับขนาดแผนภูมิแทนการใช้ความสูงที่ฉันกำหนดรูปแบบผืนผ้าใบจากสคริปต์ มีวิธีใดในการกำหนดความสูงของกราฟจากสคริปต์หรือไม่? ดูซอ: Jsfidle HTML <div class="graph"> <div class="chart-legend"> </div> <div class="chart"> <canvas id="myChart"></canvas> </div> </div> JavaScript var ctx = $('#myChart'); ctx.height(500); var myChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, …

138 javascript  jquery  chart.js 

ฉันสร้างแผนภูมิแท่งพื้นฐานโดยใช้ chartjs และใช้งานได้ดี ตอนนี้ฉันต้องการอัปเดตค่าตามช่วงเวลา ปัญหาของฉันคือหลังจากสร้างแผนภูมิแล้วฉันไม่รู้วิธีอัปเดตค่าให้ถูกต้อง ... รหัสของฉัน: var ctx = $("#myChart").get(0).getContext("2d"); var dts = [ { fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,1)", data: [0, 0, 0, 0, 0] } ]; var data = { labels: ["Core#1", "Core#2", "Core#3", "Core#4", "Total"], datasets: dts }; var chart = new Chart(ctx); chart.Bar(data); //test code setInterval( …

137 javascript  charts  chart.js 

ฉันอยากถามว่าเป็นไปได้ไหมโดยใช้ Chart.js เพื่อแสดงค่าข้อมูล? ฉันต้องการพิมพ์กราฟ ขอบคุณสำหรับคำแนะนำใด ๆ

118 javascript  chart.js 

ฉันใช้ Chart.JS เพื่อพล็อตชุดข้อมูล อย่างไรก็ตามฉันได้ผลที่ราบรื่น! นี่คือเส้นโค้งที่ฉันมี: นี่คือรหัสของฉัน: function plotChart(data, labels) { var lineChartData = { "datasets": [{ "data": data, "pointStrokeColor": "#fff", "fillColor": "rgba(220,220,220,0.5)", "pointColor": "rgba(220,220,220,1)", "strokeColor": "rgba(220,220,220,1)" }], "labels": labels }; var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData); } ฉันจะมีเส้นตรงแทนเส้นโค้งได้อย่างไร? ขอบคุณ

113 chart.js 

ฉันใช้ Chartjs เพื่อแสดงแผนภูมิเส้นและใช้งานได้ดี: // get line chart canvas var targetCanvas = document.getElementById('chartCanvas').getContext('2d'); // draw line chart var chart = new Chart(targetCanvas).Line(chartData); แต่ปัญหาเกิดขึ้นเมื่อฉันพยายามเปลี่ยนข้อมูลสำหรับแผนภูมิ ฉันอัปเดตกราฟโดยการสร้างอินสแตนซ์ใหม่ของแผนภูมิพร้อมจุดข้อมูลใหม่และทำให้ข้อมูลเริ่มต้นใหม่ ใช้งานได้ดี อย่างไรก็ตามเมื่อฉันวางเมาส์เหนือแผนภูมิใหม่หากฉันบังเอิญไปที่ตำแหน่งใดตำแหน่งหนึ่งที่ตรงกับจุดที่แสดงในแผนภูมิเก่าการวางเมาส์ / ป้ายกำกับจะยังคงถูกทริกเกอร์และทันใดนั้นแผนภูมิเก่าก็ปรากฏขึ้น มันยังคงมองเห็นได้ในขณะที่เมาส์ของฉันอยู่ที่ตำแหน่งนี้และจะหายไปเมื่อย้ายออกจากจุดนั้น ฉันไม่ต้องการให้แผนภูมิเก่าแสดง ฉันต้องการลบออกให้หมด ฉันได้พยายามล้างทั้งผืนผ้าใบและแผนภูมิที่มีอยู่ก่อนที่จะโหลดใหม่ ชอบ: targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height); และ chart.clear(); แต่สิ่งเหล่านี้ยังไม่ได้ผล มีความคิดเห็นเกี่ยวกับวิธีที่ฉันจะหยุดไม่ให้เกิดขึ้นได้อย่างไร

112 javascript  html  charts  chart.js 

นี่คือรหัสของฉัน ฉันต้องตั้งค่าเริ่มต้นเป็น "0" ทั้งในสเกลแกน x และ y ฉันได้ลองตัวเลือกเครื่องชั่งรุ่นล่าสุดแล้ว graphOptions = { ///Boolean - Whether grid lines are shown across the chart scaleShowGridLines: false, tooltipTitleTemplate: "<%= label%>", //String - Colour of the grid lines scaleGridLineColor: "rgba(0,0,0,.05)", //Number - Width of the grid lines scaleGridLineWidth: 1, //Boolean - Whether to show horizontal …

111 charts  chart.js 

ฉันมีรหัสต่อไปนี้เพื่อสร้างกราฟโดยใช้ Chart.js v2.1.3: var ctx = $('#gold_chart'); var goldChart = new Chart(ctx, { type: 'line', data: { labels: dates, datasets: [{ label: 'I want to remove this Label', data: prices, pointRadius: 0, borderWidth: 1 }] } }); รหัสดูเรียบง่าย แต่ฉันไม่สามารถลบป้ายกำกับออกจากกราฟได้ ฉันลองใช้วิธีแก้ปัญหามากมายที่พบทางออนไลน์ แต่ส่วนใหญ่ใช้ Chart.js v1.x ฉันจะลบป้ายกำกับชุดข้อมูลได้อย่างไร

109 chart.js  chart.js2 

วิธีที่จะทำให้ข้อความภายในแผนภูมิโดนัทผมใช้ChartJs

109 javascript  chart.js 

ฉันต้องการแสดงจุดทั้งหมดในแผนภูมิของฉันจากข้อมูลที่ฉันได้รับ แต่ฉันไม่ต้องการแสดงป้ายกำกับทั้งหมดสำหรับพวกเขาเนื่องจากแผนภูมินั้นอ่านไม่ได้มากนัก ฉันกำลังมองหาในเอกสาร แต่ไม่พบพารามิเตอร์ใด ๆ ที่จะ จำกัด สิ่งนี้ ฉันไม่ต้องการใช้เพียงสามป้ายเนื่องจากแผนภูมิถูก จำกัด ไว้ที่สามจุด เป็นไปได้ไหม? ฉันมีบางอย่างในขณะนี้: ถ้าฉันสามารถออกทุกๆสามในสี่ป้ายก็จะดีมาก แต่ฉันไม่พบอะไรเลยเกี่ยวกับตัวเลือกป้ายกำกับ

96 javascript  css  canvas  charts  chart.js 

ฉันใช้ ChartJS ในโปรเจ็กต์ที่ฉันกำลังทำอยู่และฉันต้องการสีที่แตกต่างกันสำหรับแต่ละแท่งในแผนภูมิแท่ง นี่คือตัวอย่างของชุดข้อมูลแผนภูมิแท่ง: var barChartData = { labels: ["001", "002", "003", "004", "005", "006", "007"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [20, 59, 80, 81, 56, 55, 40] }] }; มีวิธีใดบ้างในการทาสีแต่ละแท่งให้แตกต่างกัน?

94 javascript  chart.js 

Chart.js ( เอกสารประกอบ ) มีตัวเลือกสำหรับชุดข้อมูลเพื่อตั้งชื่อ (ชื่อเรื่อง) ของแผนภูมิ (เช่นอุณหภูมิในเมืองของฉัน) ชื่อแกน x (เช่นวัน) และชื่อแกน y (เช่นอุณหภูมิ) หรือไม่ หรือฉันควรแก้ปัญหานี้ด้วย css? var lineChartData = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : [data] } …

91 charts  title  chart.js 

API สำหรับchart.jsอนุญาตให้หนึ่งแก้ไขจุดของชุดข้อมูลที่โหลดลงในนั้นตัวอย่างเช่น: .update( ) การเรียกใช้การอัปเดต () บนอินสแตนซ์แผนภูมิของคุณจะแสดงผลแผนภูมิอีกครั้งด้วยค่าที่อัปเดตใด ๆ ทำให้คุณสามารถแก้ไขค่าของจุดที่มีอยู่หลายจุดจากนั้นแสดงค่าเหล่านั้นในลูปการแสดงภาพเคลื่อนไหวเดียว .addData( valuesArray, label ) การเรียก addData (valuesArray, label) บนอินสแตนซ์แผนภูมิของคุณซึ่งส่งผ่านอาร์เรย์ของค่าสำหรับแต่ละชุดข้อมูลพร้อมกับป้ายกำกับสำหรับจุดเหล่านั้น .removeData( ) การเรียก removeData () บนอินสแตนซ์แผนภูมิของคุณจะลบค่าแรกสำหรับชุดข้อมูลทั้งหมดบนแผนภูมิ ทั้งหมดนี้ยอดเยี่ยมมาก แต่ฉันไม่สามารถหาวิธีโหลดชุดข้อมูลใหม่ทั้งหมดได้โดยจะลบข้อมูลเก่าออกไป เอกสารประกอบดูเหมือนจะไม่ครอบคลุมถึงเรื่องนี้

89 javascript  chart.js 

ปิด . คำถามนี้จะต้องมีมากขึ้นมุ่งเน้น ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เน้นไปที่ปัญหาเดียวโดยแก้ไขโพสต์นี้เท่านั้น ปิด2 เดือนที่แล้ว . ปรับปรุงคำถามนี้ ฉันใช้ chart.js ในโปรเจ็กต์ของฉันหลายครั้ง แต่ฉันไม่เคยใช้ d3.js หลายคนบอกว่า d3.js เป็นเฟรมเวิร์กจาวาสคริปต์ที่ดีที่สุดสำหรับแผนภูมิ แต่ไม่มีใครสามารถอธิบายได้ว่าทำไมโดยเฉพาะเมื่อฉันต้องการเปรียบเทียบกับ chart.js ฉันได้พบสิ่งนี้: http://www.fusioncharts.com/javascript-charting-comparison/ แต่ไม่ใช่สิ่งที่ฉันกำลังมองหา มีใครทราบเกี่ยวกับการเปรียบเทียบกรอบการทำงานเหล่านี้ในแง่ของการใช้งานและประสิทธิภาพ (สำหรับแผนภูมิเท่านั้น)

89 javascript  d3.js  charts  chart.js 

ฉันพยายามออกโค้ดตัวอย่างสำหรับ Chart.js ที่กำหนดไว้ในเอกสาร ความกว้างและความสูงถูกระบุแบบอินไลน์บนองค์ประกอบผ้าใบที่ 400px / 400px แต่เมื่อแสดงผลแผนภูมิจะเต็มความกว้างเต็มหน้าและตัดปลายด้านขวาสุดออกไป ดูตัวอย่าง ฉันควรควบคุมความกว้าง / ความสูงของแผนภูมิอย่างไร / ที่ไหน This is some bogus text because SO prohibits linking to Codepen otherwise.

88 chart.js