时间戳

首页 > 解决方案 > L.Minichart 不显示真实值

javascript - L.Minichart 不显示真实值

问题描述

我尝试在我的地图中使用 L.minichart 应用条形图。当我使用我自己的数据库中的数据时，它没有遵循我的数据。这是我的代码 在此处输入图像描述

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
   integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
   crossorigin=""></script>

<script src="assets/js/leaflet-panel-layers-master/src/leaflet-panel-layers.js"></script>
<script src="assets/js/leaflet.ajax.js"></script>
<script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script>

   <script type="text/javascript">
    var map = L.map('mapid').setView([-7.7951371, 110.1039079], 11);
    var LayerKita = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: TOKEN
});
    map.addLayer(LayerKita);

    //ASKES
    <?php
            $getKecamatan=$db->ObjectBuilder()->get('kecamatan');
            foreach ($getKecamatan as $row) {
            $db->where('kode_kecamatan',$row->kode_kecamatan);
            $db->where("kartu_jaminan", 'ASKES%', 'like');
            $db->get('disabilitas');
            $dataAskes[$row->kode_kecamatan]=$db->count;
            }
        ?>
        var Askes = <?=json_encode($dataAskes)?>; 
    
    //BPJS
    <?php
            $getKecamatan=$db->ObjectBuilder()->get('kecamatan');
            foreach ($getKecamatan as $row) {
            $db->where('kode_kecamatan',$row->kode_kecamatan);
            $db->where("kartu_jaminan", 'BPJS%', 'like');
            $db->get('disabilitas');
            $dataBPJS[$row->kode_kecamatan]=$db->count;
            }
        ?>
        var BPJS = <?=json_encode($dataBPJS)?>; 
    
    //KIS
    <?php
            $getKecamatan=$db->ObjectBuilder()->get('kecamatan');
            foreach ($getKecamatan as $row) {
            $db->where('kode_kecamatan',$row->kode_kecamatan);
            $db->where("kartu_jaminan", 'KIS%', 'like');
            $db->get('disabilitas');
            $dataKIS[$row->kode_kecamatan]=$db->count;
            }
        ?>
        var KIS = <?=json_encode($dataKIS)?>; 
    
    //Jamkesmas
    <?php
            $getKecamatan=$db->ObjectBuilder()->get('kecamatan');
            foreach ($getKecamatan as $row) {
            $db->where('kode_kecamatan',$row->kode_kecamatan);
            $db->where("kartu_jaminan", 'Jamkesmas%', 'like');
            $db->get('disabilitas');
            $dataJamkesmas[$row->kode_kecamatan]=$db->count;
            }
        ?>
        var Jamkesmas = <?=json_encode($dataJamkesmas)?>; 
    
    //Jamkesda
    <?php
            $getKecamatan=$db->ObjectBuilder()->get('kecamatan');
            foreach ($getKecamatan as $row) {
            $db->where('kode_kecamatan',$row->kode_kecamatan);
            $db->where("kartu_jaminan", 'Jamkesda%', 'like');
            $db->get('disabilitas');
            $dataJamkesda[$row->kode_kecamatan]=$db->count;
            }
        ?>
        var Jamkesda = <?=json_encode($dataJamkesda)?>;
    
    //Jamkesos
    <?php
            $getKecamatan=$db->ObjectBuilder()->get('kecamatan');
            foreach ($getKecamatan as $row) {
            $db->where('kode_kecamatan',$row->kode_kecamatan);
            $db->where("kartu_jaminan", 'Jamkesos%', 'like');
            $db->get('disabilitas');
            $dataJamkesos[$row->kode_kecamatan]=$db->count;
            }
        ?>
        var Jamkesos = <?=json_encode($dataJamkesos)?>;
    
    //Jamkesus
    <?php
            $getKecamatan=$db->ObjectBuilder()->get('kecamatan');
            foreach ($getKecamatan as $row) {
            $db->where('kode_kecamatan',$row->kode_kecamatan);
            $db->where("kartu_jaminan", 'Jamkesus%', 'like');
            $db->get('disabilitas');
            $dataJamkesus[$row->kode_kecamatan]=$db->count;
            }
        ?>
        var Jamkesus = <?=json_encode($dataJamkesus)?>;
    
    //Tidak memiliki jaminan
    <?php
            $getKecamatan=$db->ObjectBuilder()->get('kecamatan');
            foreach ($getKecamatan as $row) {
            $db->where('kode_kecamatan',$row->kode_kecamatan);
            $db->where("kartu_jaminan", NULL, 'IS');
            $db->get('disabilitas');
            $dataTidakJaminan[$row->kode_kecamatan]=$db->count;
            }
        ?>
        var TidakJaminan = <?=json_encode($dataTidakJaminan)?>;
    
    <?php
        $getKecamatan=$db->ObjectBuilder()->get('kecamatan');
        foreach ($getKecamatan as $row) {
        ?>

        <?php
            $arrayKecBarChart[]='{
            location: ['.$row->latitude_kec.','.$row->longitude_kec.'],
            nama: "'.$row->nama_kecamatan.'",
            ASKES: '.$dataAskes[$row->kode_kecamatan].',
            BPJS: '.$dataBPJS[$row->kode_kecamatan].',
            KIS: '.$dataKIS[$row->kode_kecamatan].',
            Jamkesmas: '.$dataJamkesmas[$row->kode_kecamatan].',
            Jamkesda: '.$dataJamkesda[$row->kode_kecamatan].',
            Jamkesos: '.$dataJamkesos[$row->kode_kecamatan].',
            Jamkesus: '.$dataJamkesus[$row->kode_kecamatan].',
            TidakJaminan: '.$dataTidakJaminan[$row->kode_kecamatan].'
            }';
        }
    ?>

    var bars = 
            [<?=implode(',', $arrayKecBarChart);?>]

    
    // script bar chart coba dari github
    bars.forEach(bar => {

    var options = {
    data: {
        'dataPoint1': bar.ASKES / 5,
        'dataPoint2': bar.BPJS / 5,
        'dataPoint3': bar.KIS / 5,
        'dataPoint3': bar.Jamkesmas / 5,
        'dataPoint4': bar.Jamkesda / 5,
        'dataPoint5': bar.Jamkesos / 5,
        'dataPoint6': bar.Jamkesus / 5,
        'dataPoint7': bar.TidakJaminan / 5
    },
    chartOptions: {
        'dataPoint1': {
            fillColor: '#FEE5D9',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint2': {
            fillColor: '#FCAE91',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint3': {
            fillColor: '#FB6A4A',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint4': {
            fillColor: '#d44000',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint5': {
            fillColor: '#CB181D',
            minValue: 0,
            maxValue: 150,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint6': {
            fillColor: '#ffc996',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint7': {
            fillColor: '#845460',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint8': {
            fillColor: '#81b214',
            minValue: 0,
            maxValue: 20,
            maxHeight: 150,
            displayText: function (value) {
                return value.toFixed(2);
            }
        }
    },
    weight: 1,
    color: '#000000',
    }
    
     
    var barChartMarker = L.minichart(bar.location, {data: [1, 2, 3, 4, 5, 6, 7, 8], maxValues: 8});
    map.addLayer(barChartMarker);

    console.log(barChartMarker);
    })


   </script>

标签： javascriptchartsleafletbar-chartgis

解决方案

您没有将数据应用到 barChar：

var barChartMarker = L.minichart(bar.location, {data: [1, 2, 3, 4, 5, 6, 7, 8], maxValues: 8});

利用：

var barChartMarker = L.minichart(bar.location, options);

更新

您需要在 data 属性中传递一个数字数组：

var options = {
    data: [
        bar.ASKES / 5,
        bar.BPJS / 5,
        bar.KIS / 5,
        bar.Jamkesmas / 5,
        bar.Jamkesda / 5,
        bar.Jamkesos / 5,
        bar.Jamkesus / 5,
        bar.TidakJaminan / 5
    ],

然后使用var barChartMarker = L.minichart(bar.location, options);

推荐阅读