javascript - 谷歌散点图只连接几个点

标签 javascript php multidimensional-array charts google-visualization

我正在创建一个函数来接收数组并将其显示到图表中。这是我的功能:

function drawChart($aaa)
{

    $addr = (unset_num_keys($aaa));
    $arr = str_replace_deep(',', '', $addr);

    $tmp33 = array();
    foreach ($arr as $b) {
        foreach ($b as $key => $value) {
            array_push($tmp33, $key);
        }
    }
    $keys = (($tmp33));
    reset($keys);
    $quality = current($keys);
    $first_quantity = next($keys); // cost
    $second_quantity = next($keys);// count



    end($arr);
    $total = key($arr);

    $result = array(); // use later
    $head = array(); // this is  column headers

// data make sense
    foreach ($arr as $item) {
        $result[$item[$first_quantity]][$item[$quality]] = $item[$second_quantity];
        if (!in_array($item[$quality], $head)) $head[] = $item[$quality];
    }
// sort the columns
    sort($head);


    ?>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>
        google.load('visualization', '1.0', {'packages': ['corechart']});
        google.setOnLoadCallback(drawChart1);
        function drawChart1() {

            var data = google.visualization.arrayToDataTable([
                <?php
                // print  headers
    $first_line = "['x' ";
    foreach($head as $col) {
    $first_line.= ",'{$col}'";
    }
    $first_line.= '],';
    echo ($first_line);
    $ccc = $total + 1;
    $x= 0;
    foreach($result as $cost=>$data) {
    print PHP_EOL;
    print '['.$cost;
    // print the row data
    foreach($head as $col) {
        echo (', ');
        if(isset($data[$col])){
            echo $data[$col];
        }
        else {
            echo 'null';
        }
    }
    $x+=1;
    if($x == $ccc){
        echo ']';
    }else{
        echo '],';
    }
    }
    ?>
            ]);
            var options = {
                width: 1000,
                height: 800,
                title: '<?php echo $second_quantity .' vs '. $first_quantity ?>',
                hAxis: {title: '<?php echo $second_quantity ?>', minValue: 0, maxValue: 80},
                vAxis: {title: '<?php echo $first_quantity ?>', minValue: 1, maxValue: 5},
                legend: '',
                lineWidth: 1,

            };

            var chart = new google.visualization.ScatterChart(document.getElementById('chart_scatter_container'));
            chart.draw(data, options);
        }
    </script>

    <div>
        <div id="chart_scatter_container"></div>
    </div>
    <?php
}

我打印的数组是:

    array(39) {
  [0]=>
  array(3) {
    ["tp__countries"]=>
    string(1) "0"
    ["s__cost"]=>
    string(16) "3549.69674299945"
    ["s__count"]=>
    string(5) "44702"
  }
  [1]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "ES"
    ["s__cost"]=>
    string(10) "879.418339"
    ["s__count"]=>
    string(5) "17603"
  }
  [2]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "LT"
    ["s__cost"]=>
    string(16) "11654.8636480001"
    ["s__count"]=>
    string(5) "68194"
  }
  [3]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "RO"
    ["s__cost"]=>
    string(16) "13233.0624829999"
    ["s__count"]=>
    string(5) "77635"
  }
  [4]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "PT"
    ["s__cost"]=>
    string(16) "6021.97734000015"
    ["s__count"]=>
    string(5) "48823"
  }
  [5]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "BG"
    ["s__cost"]=>
    string(16) "12475.9093689996"
    ["s__count"]=>
    string(6) "161058"
  }
  [6]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "DE"
    ["s__cost"]=>
    string(16) "128821.597502001"
    ["s__count"]=>
    string(6) "302764"
  }
  [7]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "NL"
    ["s__cost"]=>
    string(11) "2067.504876"
    ["s__count"]=>
    string(5) "40197"
  }
  [8]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "SE"
    ["s__cost"]=>
    string(16) "11811.1883229999"
    ["s__count"]=>
    string(5) "68376"
  }
  [9]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "PL"
    ["s__cost"]=>
    string(16) "31114.3304799997"
    ["s__count"]=>
    string(6) "579592"
  }
  [10]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "ES"
    ["s__cost"]=>
    string(16) "25815.2225409994"
    ["s__count"]=>
    string(6) "272734"
  }
  [11]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "DK"
    ["s__cost"]=>
    string(12) "10927.055328"
    ["s__count"]=>
    string(5) "65047"
  }
  [12]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "SK"
    ["s__cost"]=>
    string(16) "21889.9245769999"
    ["s__count"]=>
    string(6) "147860"
  }
  [13]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "RS"
    ["s__cost"]=>
    string(11) "1541.130993"
    ["s__count"]=>
    string(5) "17387"
  }
  [14]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "CZ"
    ["s__cost"]=>
    string(11) "1153.486667"
    ["s__count"]=>
    string(4) "7652"
  }
  [15]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "AT"
    ["s__cost"]=>
    string(12) "15077.602754"
    ["s__count"]=>
    string(5) "90878"
  }
  [16]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "HU"
    ["s__cost"]=>
    string(16) "22343.3156679996"
    ["s__count"]=>
    string(6) "178293"
  }
  [17]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "FR"
    ["s__cost"]=>
    string(11) "1022.383048"
    ["s__count"]=>
    string(5) "17919"
  }
  [18]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "LU"
    ["s__cost"]=>
    string(10) "616.632725"
    ["s__count"]=>
    string(4) "3305"
  }
  [19]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "CH"
    ["s__cost"]=>
    string(16) "70222.2027759995"
    ["s__count"]=>
    string(6) "129720"
  }
  [20]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "FR"
    ["s__cost"]=>
    string(16) "32867.1459510004"
    ["s__count"]=>
    string(6) "371959"
  }
  [21]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "BE"
    ["s__cost"]=>
    string(8) "8.267687"
    ["s__count"]=>
    string(3) "112"
  }
  [22]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "SI"
    ["s__cost"]=>
    string(16) "15106.5158180003"
    ["s__count"]=>
    string(5) "91042"
  }
  [23]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "NL"
    ["s__cost"]=>
    string(9) "52.941944"
    ["s__count"]=>
    string(3) "318"
  }
  [24]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "DK"
    ["s__cost"]=>
    string(10) "109.234532"
    ["s__count"]=>
    string(3) "170"
  }
  [25]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "EE"
    ["s__cost"]=>
    string(11) "1831.755241"
    ["s__count"]=>
    string(5) "12774"
  }
  [26]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "HR"
    ["s__cost"]=>
    string(16) "6160.90684600014"
    ["s__count"]=>
    string(6) "117920"
  }
  [27]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "BG"
    ["s__cost"]=>
    string(10) "529.128457"
    ["s__count"]=>
    string(4) "5811"
  }
  [28]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "NO"
    ["s__cost"]=>
    string(16) "4911.05633099998"
    ["s__count"]=>
    string(5) "23608"
  }
  [29]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "LT"
    ["s__cost"]=>
    string(10) "121.389453"
    ["s__count"]=>
    string(3) "332"
  }
  [30]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "TR"
    ["s__cost"]=>
    string(16) "5025.50124400001"
    ["s__count"]=>
    string(6) "126000"
  }
  [31]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "FI"
    ["s__cost"]=>
    string(16) "90113.5562880005"
    ["s__count"]=>
    string(6) "286112"
  }
  [32]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "FI"
    ["s__cost"]=>
    string(10) "936.025395"
    ["s__count"]=>
    string(4) "2282"
  }
  [33]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "IT"
    ["s__cost"]=>
    string(15) "29725.856092999"
    ["s__count"]=>
    string(6) "252218"
  }
  [34]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "GR"
    ["s__cost"]=>
    string(16) "6447.89670199999"
    ["s__count"]=>
    string(5) "65779"
  }
  [35]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "GR"
    ["s__cost"]=>
    string(10) "239.436844"
    ["s__count"]=>
    string(4) "1475"
  }
  [36]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "LV"
    ["s__cost"]=>
    string(16) "2735.72514400005"
    ["s__count"]=>
    string(5) "17197"
  }
  [37]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "BE"
    ["s__cost"]=>
    string(16) "15726.2164499999"
    ["s__count"]=>
    string(5) "82200"
  }
  [38]=>
  array(3) {
    ["tp__countries"]=>
    string(2) "CZ"
    ["s__cost"]=>
    string(16) "58794.9746150012"
    ["s__count"]=>
    string(6) "362743"
  }
}

如您所见，在我的阵列中，我有时会重复同一个国家，但有时图表会绘制一条连接同一个国家的线。 这里的例子: enter image description here

我选择了FR，它显示了2个点，但没有一条连接线。

可能是什么问题？

编辑:

http://jsfiddle.net/nr1mjqtx/7/

为了方便查看问题

最佳答案

在我看来，您在图表中绘制了两条连接线。
一个连接“FI”，另一个连接“GR”。

这两组数据点在数组 中彼此相邻。

然而，“FR” 的点由其他点分隔。

尝试在绘制之前按tp__countries 对您的array 进行排序...

在这里，我手动将 "FR" 的行移动到一起，并且该行出现... 

        google.load('visualization', '1.0', {'packages': ['corechart']});
        google.setOnLoadCallback(drawChart1);
        function drawChart1() {

            var data = google.visualization.arrayToDataTable([
                ['x' ,'0','AT','BE','BG','CH','CZ','DE','DK','EE','ES','FI','FR','GR','HR','HU','IT','LT','LU','LV','NL','NO','PL','PT','RO','RS','SE','SI','SK','TR'],
[3549.69674299945, 44702, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[879.418339, null, null, null, null, null, null, null, null, null, 17603, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[11654.8636480001, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 68194, null, null, null, null, null, null, null, null, null, null, null, null],
[13233.0624829999, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 77635, null, null, null, null, null],
[6021.97734000015, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 48823, null, null, null, null, null, null],
[12475.9093689996, null, null, null, 161058, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[128821.597502001, null, null, null, null, null, null, 302764, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[2067.504876, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 40197, null, null, null, null, null, null, null, null, null],
[11811.1883229999, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 68376, null, null, null],
[31114.3304799997, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 579592, null, null, null, null, null, null, null],
[25815.2225409994, null, null, null, null, null, null, null, null, null, 272734, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[10927.055328, null, null, null, null, null, null, null, 65047, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[21889.9245769999, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 147860, null],
[1541.130993, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 17387, null, null, null, null],
[1153.486667, null, null, null, null, null, 7652, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[15077.602754, null, 90878, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[22343.3156679996, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 178293, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[616.632725, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 3305, null, null, null, null, null, null, null, null, null, null, null],
[70222.2027759995, null, null, null, null, 129720, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[1022.383048, null, null, null, null, null, null, null, null, null, null, null, 17919, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[32867.1459510004, null, null, null, null, null, null, null, null, null, null, null, 371959, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[8.267687, null, null, 112, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[15106.5158180003, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 91042, null, null],
[52.941944, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 318, null, null, null, null, null, null, null, null, null],
[109.234532, null, null, null, null, null, null, null, 170, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[1831.755241, null, null, null, null, null, null, null, null, 12774, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[6160.90684600014, null, null, null, null, null, null, null, null, null, null, null, null, null, 117920, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[529.128457, null, null, null, 5811, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[4911.05633099998, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 23608, null, null, null, null, null, null, null, null],
[121.389453, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 332, null, null, null, null, null, null, null, null, null, null, null, null],
[5025.50124400001, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 126000],
[90113.5562880005, null, null, null, null, null, null, null, null, null, null, 286112, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[936.025395, null, null, null, null, null, null, null, null, null, null, 2282, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[29725.856092999, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 252218, null, null, null, null, null, null, null, null, null, null, null, null, null],
[6447.89670199999, null, null, null, null, null, null, null, null, null, null, null, null, 65779, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[239.436844, null, null, null, null, null, null, null, null, null, null, null, null, 1475, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[2735.72514400005, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 17197, null, null, null, null, null, null, null, null, null, null],
[15726.2164499999, null, null, 82200, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
[58794.9746150012, null, null, null, null, null, 362743, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null]            ]);
            var options = {
                width: 1000,
                height: 800,
                title: 's__count vs s__cost',
                hAxis: {title: 's__count', minValue: 0, maxValue: 80},
                vAxis: {title: 's__cost', minValue: 1, maxValue: 5},
                legend: '',
                lineWidth: 3,

            };

            var chart = new google.visualization.ScatterChart(document.getElementById('chart_scatter_container'));
            chart.draw(data, options);
        }
<script src="https://www.google.com/jsapi"></script>
<div id="chart_scatter_container"></div>

关于javascript - 谷歌散点图只连接几个点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34992887/

上一篇：javascript - Protractor :无法使用 Protractor 获取所有元素

下一篇：javascript - Python文件上传: Ajax with Multiple Other Fields,和Flask上传

相关文章：

javascript - 使用 Window_handles 单击位置弹出窗口中的按钮，带守夜人

php - Doctrine2关系-如何设置不存在的关联实体对象

php - 如何更改 WordPress 中的图片作者？

javascript - 查找数组并将其移动到多维数组的开头

javascript - 什么是使用 html-php 的母版页

javascript - 如何通过我选择的 div 更改按钮的样式？

javascript - 如何在保存时自动将当前用户添加到模型中？

PHP:如何发送 HTTP 响应代码？

java - 任意次数的for循环计算

java - 如何将二维数组存储在常规数组中？ java

©2024 IT工具网  联系我们