如何在美国热图中显示数据 - Javascript - Laravel 5

Question

我想像这样在 JS 热图中显示数据：

这是我收到的两种不同类型的数据：

我得到的数据是这样的：

public function index() {

        $regions = DB::table('locations')
            ->select('regionCode', DB::raw('count(id) as total'))
            ->groupBy('regionCode')
            ->get();

        $newRegions = [];

        foreach( $regions as $region ){
            $newRegions[$region->regionCode] = $region->total;
        }

        return view('admin.dashboard-v2', compact('newRegions'));
}

这就是我应该如何显示它：

var map = AmCharts.makeChart( "chartdiv", {
  type: "map",
  "theme": "light",

  colorSteps: 10,

  dataProvider: {
    map: "usaLow",
    areas: [ {
      id: "US-AL",
      value: 4447100
    }, {
      id: "US-AK",
      value: 626932
    }, {
      id: "US-AZ",
      value: 5130632
    }, {
      id: "US-AR",
      value: 2673400
    }, {
      id: "US-CA",
      value: 33871648
    },.... and so on

我无法像上面那样显示它：我如何将从数组中获取的数据显示到 ChartJS 脚本的 'areas' 部分？

我试过了，但没用：

areas: [ {
                    id: "US-{!! json_encode(array_keys($newRegions)) !!}",
                    value: {!! json_encode(array_values($newRegions)) !!}
                } ]

Answer 1

is是一个很常见的问题，将数据结构转化为具体的实现。 phpleague 有许多很酷的软件包可以帮助您解决这个问题。我的最爱之一是 http://fractal.thephpleague.com/

但是，我想在 plain PHP 中向您展示如何将数组转换为 所需的结构。

1) 获取需要转换的数据数组（上图中显示的数据）

array:15[
0 => regioncode:"AL"
     total: 16]
]...

2)使用array_map函数

变换数组

 //http://php.net/manual/en/function.array-map.php  
  $transformedarray = array_map(function ($loopdata) { 

                    return [
                        "id" => "US-".$loopdata['regionCode'],
                        "value" => $loopdata['value']                    

                    ];

                }, $regions->toArray());

3) var_dump($transformedarray) o return 这个数组与 laravel 响应来检查所需的结构匹配你要求。

4) 使用此方法将此变量（数组）传递给视图

return view('admin.dashboard-v2')->with(['newarray' => $transformedarray]);

5) 如果您正在使用 BLADE，请尝试使用用户控制结构来循环访问您的数据 https://laravel.com/docs/5.0/templates

在视图中需要数据填充的位置插入此代码片段

areas: [ 
       @foreach ($newarray as $newarr)
    {
    id:{{ $newarr->id }},
    value:{{ $newarr->value }}
    },
       @endforeach

 ]

希望对您有所帮助

Answer 2

我是这样做的：

$heatMap = DB::table('locations')
            ->select('regionCode', DB::raw('count(id) as total'))
            ->groupBy('regionCode')
            ->get();

$newHeatMap = [];


foreach( $heatMap as $regionH ){
   $newHeatMap[] = [ 'id' => 'US-' . $regionH->regionCode, 'value' => $regionH->total ];
}

return view('admin.dashboard-v2', compact('newHeatMap'));

然后在我的图表 JS

dataProvider: {
       map: "usaLow",
       areas:  {!! json_encode(array_values($newHeatMap)) !!}
},

如何在美国热图中显示数据 - Javascript - Laravel 5

How to display data in US Heat Map - Javascript - Laravel 5

javascript

php

dictionary

heatmap

laravel