إعادة تحميل بيانات الرسم البياني عبر JSON مع Highcharts
https://stackoverflow.com/questions/4210879
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أحاول إعادة تحميل البيانات الخاصة برسم مخطط HighCharts عبر JSON استنادًا إلى زر انقر فوق مكان آخر في الصفحة. في البداية ، أود أن أعرض مجموعة افتراضية من البيانات (الإنفاق حسب الفئة) ولكن بعد ذلك قم بتحميل بيانات جديدة بناءً على إدخال المستخدم (الإنفاق حسب الشهر ، على سبيل المثال). أسهل طريقة يمكنني التفكير في إخراج JSON من الخادم هي تمرير طلب الحصول على صفحة PHP ، على سبيل المثال $ .get ('/العجين/يشمل/live-chart.php؟ mode = month', ، استرجاع هذه القيمة من سمة معرف الزر.
إليك ما لدي حتى الآن لاسترداد البيانات الافتراضية (الإنفاق حسب الفئة). تحتاج إلى العثور على كيفية تحميل بيانات مختلفة تمامًا في مخطط الفطيرة ، بناءً على إدخال المستخدم ، عند الطلب:
$(document).ready(function() {
//This is an example of how I would retrieve the value for the button
$(".clickMe").click(function() {
var clickID = $(this).attr("id");
});
var options = {
chart: {
renderTo: 'graph-container',
margin: [10, 175, 40, 40]
},
title: {
text: 'Spending by Category'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: $'+ this.y;
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
if (this.y > 5) return '$' + this.y;
},
color: 'white',
style: {
font: '13px Trebuchet MS, Verdana, sans-serif'
}
}
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '50px',
top: '100px'
}
},
series: [{
type: 'pie',
name: 'Spending',
data: []
}]
};
$.get('/dough/includes/live-chart.php', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
});
أي مساعدة سيكون موضع تقدير كبير
تعديل
هنا هو JavaScript المحدث بفضل Robodude. جون ، لديك لي على المسار الصحيح هنا - شكرا! أنا الآن تتعثر في كيفية استبدال البيانات الموجودة على الرسم البياني من طلب AJAX. يجب أن أعترف أن الكود الذي يتبع $ .get () هو على الأرجح من رمز العينة ، لا أفهم تمامًا ما يجري عند تشغيله - ربما هناك طريقة أفضل لتنسيق البيانات؟
تمكنت من إحراز بعض التقدم في أن المخطط الآن يعمل على تحميل بيانات جديدة ولكن يضاف إلى أعلى ما هو موجود بالفعل. أظن أن الجاني هو هذا الخط:
options.series[0].data.push(data);
لقد جربت الخيارات. ولكن لا شيء يحدث. على الجانب المشرق ، يعمل طلب AJAX بلا عيب بناءً على قيمة القائمة المحددة ولا توجد أخطاء JavaScript. فيما يلي الرمز المعني ، خيارات Sans Chart:
$.get('/dough/includes/live-chart.php?mode=cat', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
$("#loadChart").click(function() {
var loadChartData = $("#chartCat").val();
$.get('/dough/includes/live-chart.php?mode=' + loadChartData, function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
});
});
تحرير 2هذا هو التنسيق الذي يسحبه الرسم البياني من - اسم فئة بسيط للغاية وقيمة مع n بعد كل منهما.
Coffee, 4.08
Dining Out, 5.05
Dining: ODU, 5.97
Dining: Work, 38.41
Entertainment, 4.14
Gas, 79.65
Groceries, 228.23
Household, 11.21
Misc, 12.20
Snacks, 20.27
المحلول
تحرير: الاستجابة لأسفل أدناه أكثر صحة!
https://stackoverflow.com/a/8408466/387285
http://www.highcharts.com/ref/#series-object
لغة البرمجة:
<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set B
</SELECT>
<button id="change">Refresh Table</button>
<div id="container" style="height: 400px"></div>
JavaScript:
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline'
},
series: []
};
$("#change").click(function() {
if ($("#list").val() == "A") {
options.series = [{name: 'A', data: [1,2,3,2,1]}]
// $.get('/dough/includes/live-chart.php?mode=month'
} else {
options.series = [{name: 'B', data: [3,2,1,2,3]}]
// $.get('/dough/includes/live-chart.php?mode=newmode'
}
var chart = new Highcharts.Chart(options);
});
هذا مثال بسيط للغاية لأنني لا أملك ملفاتي هنا ولكن الفكرة الأساسية هي أنه في كل مرة يختار المستخدم خيارات جديدة للأشياء التي يريدون رؤيتها ، ستحصل على استبدال كائن بيانات .series مع المعلومات الجديدة من الخادم الخاص بك ثم أعد إنشاء المخطط باستخدام HighCharts.Chart () ؛.
أتمنى أن يساعدك هذا! يوحنا
تعديل:
تحقق من ذلك ، إنه من شيء عملت عليه في الماضي:
$("table#tblGeneralInfo2 > tbody > tr").each(function (index) {
if (index != 0) {
var chartnumbervalue = parseInt($(this).find("td:last").text());
var charttextvalue = $(this).find("td:first").text();
chartoptions.series[0].data.push([charttextvalue, chartnumbervalue]);
}
});
كان لدي طاولة تحتوي على معلومات في TDs الأولى والأخيرة التي كنت بحاجة لإضافتها إلى مخطط الفطيرة. أنا حلقة من خلال كل من الصفوف وأضغط في القيم. ملاحظة: أستخدم chartoptions.series [0] .Data لأن مخططات الفطيرة لها سلسلة واحدة فقط.
نصائح أخرى
الإجابات الأخرى لم تنجح بالنسبة لي. لقد وجدت الجواب في وثائقهم:
http://api.highcharts.com/highcharts#series
باستخدام هذه الطريقة (انظر مثال JSfiddle):
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
// the button action
$('#button').click(function() {
chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});
تحتاج إلى مسح الصفيف القديم قبل دفع البيانات الجديدة. هناك العديد من الطرق لإنجاز هذا ولكن استخدمت هذا:
options.series[0].data.length = 0;
لذلك يجب أن يبدو الرمز الخاص بك هكذا:
options.series[0].data.length = 0;
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
الآن عندما يتم النقر فوق الزر ، يتم تطهير البيانات القديمة ويجب ظهور البيانات الجديدة فقط. امل ان يساعد.
في الواقع ربما يجب عليك اختيار الوظيفة update أفضل.
إليك وثيقة الوظيفة update http://api.highcharts.com/highcharts#series.update
يمكنك فقط كتابة رمز مثل أدناه:
chart.series[0].update({data: [1,2,3,4,5]})
سوف تندمج هذه الرمز خيار Origin ، وتحديث البيانات التي تم تغييرها.
الإجابة الصحيحة هي:
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
data = {};
});
تحتاج إلى مسح صفيف "البيانات".
data = {};
اذا أنت نكون باستخدام الضغط لدفع البيانات إلى الخيار.
options.series = [];
لمسحها.
options.series = [];
$("#change").click(function(){
}
يمكنك دائمًا تحميل بيانات JSON
هنا حددت الرسم البياني على أنه مساحة اسم
$.getJSON('data.json', function(data){
Chart.options.series[0].data = data[0].data;
Chart.options.series[1].data = data[1].data;
Chart.options.series[2].data = data[2].data;
var chart = new Highcharts.Chart(Chart.options);
});
data = [150,300]; // data from ajax or any other way
chart.series[0].setData(data, true);
ال setData سوف استدعاء طريقة إعادة الرسم.
المرجعي: http://api.highcharts.com/highcharts/series.setdata
