这是我在我的控制器上的查询。我想每年注册参与者。我得到了每年的年份和数据。但我不知道如何在highchart中动态传递我的数据
if ($request->ajax()) {
$tahun = Peserta::orderBy('tanggal','asc')->select(\DB::raw("YEAR(tanggal) as year"))->distinct()->get();
$years = $tahun->pluck('year');
$value_an_year = [];
$month = [01,02,03,04,05,06,07,8,9,10,11,12];
$monthNames = collect($month)->transform(function ($value) {
return \Carbon\Carbon::parse(date('Y').'-'.$value.'-01')->format('M');
})->toArray();
$cetak_bulanan = [];
foreach($years as $key => $thn){
$value_an_year[] = Peserta::where(\DB::raw("DATE_FORMAT(tanggal, '%Y')"),$thn)->count();
$bulanan = [];
foreach($month as $key => $bln){
$bulanan[] = Peserta::where(\DB::raw("DATE_FORMAT(tanggal, '%Y')"),$thn)->where(\DB::raw("DATE_FORMAT(tanggal, '%m')"),$bln)->count();
}
$cetak_bulanan[] = implode(',',$bulanan);
}
$hasil_bulanan = implode('<br>',$cetak_bulanan);
$hasil_tahunan = implode(',',$value_an_year);
$nama_bulan = implode(',',$monthNames);
return response()->json(
[
'status' => 200,
'tahunan' => $value_an_year,
'tahun' => $years,
'message' => 'chart perkembangan pengguna tilawati'
]
);
}这是一个 highcharts javascript
$.ajax({
url: '{{ route("chart.perkembangan.pengguna") }}',
type: 'get',
dataType: 'json',
success: function(response) {
console.log(response.tahunan, '-' ,response.tahun);
Highcharts.chart('container3', {
chart: {
type: 'column'
},
title: {
align: 'left',
text: 'Browser market shares. January, 2018'
},
subtitle: {
align: 'left',
text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
},
accessibility: {
announceNewData: {
enabled: true
}
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [
{
name: "Tahunan",
colorByPoint: true,
data: [
{
name: "Firefox",
y: 10.57,
drilldown: "Firefox"
},
{
name: "Internet Explorer",
y: 7.23,
drilldown: "Internet Explorer"
},
{
name: "Safari",
y: 5.58,
drilldown: "Safari"
},
{
name: "Edge",
y: 4.02,
drilldown: "Edge"
},
{
name: "Opera",
y: 1.92,
drilldown: "Opera"
},
{
name: "Other",
y: 7.62,
drilldown: null
}
],
}
],
drilldown: {
breadcrumbs: {
position: {
align: 'right'
}
},
series: [
{
name: "Chrome",
id: "Chrome",
data: [
[
"v65.0",
0.1
],
[
"v64.0",
1.3
],
[
"v63.0",
53.02
],
[
"v62.0",
1.4
],
[
"v61.0",
0.88
],
[
"v60.0",
0.56
],
[
"v59.0",
0.45
],
[
"v58.0",
0.49
],
[
"v57.0",
0.32
],
[
"v56.0",
0.29
],
[
"v55.0",
0.79
],
[
"v54.0",
0.18
],
[
"v51.0",
0.13
],
[
"v49.0",
2.16
],
[
"v48.0",
0.13
],
[
"v47.0",
0.11
],
[
"v43.0",
0.17
],
[
"v29.0",
0.26
]
]
},
{
name: "Firefox",
id: "Firefox",
data: [
[
"v58.0",
1.02
],
[
"v57.0",
7.36
],
[
"v56.0",
0.35
],
[
"v55.0",
0.11
],
[
"v54.0",
0.1
],
[
"v52.0",
0.95
],
[
"v51.0",
0.15
],
[
"v50.0",
0.1
],
[
"v48.0",
0.31
],
[
"v47.0",
0.12
]
]
},
{
name: "Internet Explorer",
id: "Internet Explorer",
data: [
[
"v11.0",
6.2
],
[
"v10.0",
0.29
],
[
"v9.0",
0.27
],
[
"v8.0",
0.47
]
]
},
{
name: "Safari",
id: "Safari",
data: [
[
"v11.0",
3.39
],
[
"v10.1",
0.96
],
[
"v10.0",
0.36
],
[
"v9.1",
0.54
],
[
"v9.0",
0.13
],
[
"v5.1",
0.2
]
]
},
{
name: "Edge",
id: "Edge",
data: [
[
"v16",
2.6
],
[
"v15",
0.92
],
[
"v14",
0.4
],
[
"v13",
0.1
]
]
},
{
name: "Opera",
id: "Opera",
data: [
[
"v50.0",
0.96
],
[
"v49.0",
0.82
],
[
"v12.1",
0.14
]
]
}
]
}
});
}
});我的问题是如何在系列中的“数据名称”中填充“tahun”，在“数据y”中填充“tahunan”
2条答案
按热度按时间y0u0uwnf1#
在控制器中使用数组和响应json，在前面的js中使用每个循环。
控制器：
JS：
在js代码中使用tahun和tahunan以及其他变量，或者将其附加到html中，例如：
或
zbdgwd5y2#
您需要将数据结构调整为Highcharts所需的格式-对象的数组或具有2个值的数组的数组。例如：
现场演示：http://jsfiddle.net/BlackLabel/s58w3tdy/
API引用：https://api.highcharts.com/highcharts/series.line.data