Highcharts动态添加数据系列

时间:2016-05-24 14:38:51

标签: javascript angularjs json highcharts

我知道这个问题可能已经被问过,但我找不到我想要的答案。

问题是:我使用PHP脚本生成JSON字符串,此字符串用作ng-repeat的输入,通过指令发送它,然后使用它创建一系列Highchart图表。我已经操纵了数据,因此它只是chart.addNewSeries(name, data)的问题,但这是不可能的,所以我一直在寻找解决方案,但无法找到任何东西。

这是我到目前为止的代码:

提供JSON的PHP

$sql = "SELECT info.position, info.date, info.keyword, url.url
    FROM Concurrentie_position AS info
    INNER JOIN Concurrentie_sitename AS url ON info.record_id = url.id
    ORDER BY info.date";

$urlData = array();
$dates = array();
global $conn;

$result = $conn->query($sql);
while($row = $result->fetch_assoc()) {
    $matchFound = false;
    for($i = 0; $i < count($urlData); $i++) {
        if($urlData[$i]["keyword"] == $row["keyword"]){
            addDates($row["date"]);
            $urlData[$i]["urlpos"][$row["url"]][] = $row["position"];
            $matchFound = true;
            break;
        }
    }
    if (!$matchFound) {
        $urlData[] = array(
            "keyword" => $row["keyword"],
            "urlpos" => array(
                $row["url"] => array($row["position"])
            )
        );
    }
}
addDatesToArr();

function addDatesToArr(){
    global $urlData, $dates;
    for($i = 0; $i < count($urlData); $i++){
        $urlData[$i]["date"] = $dates;
    }
}
echo json_encode($urlData);

这是数据最终的控制器:

var dataList = filterSites();


var chart = new Highcharts.chart('container'+$scope.index, {
    chart: {
        type: 'area'
    },
    title: {

        text: 'Aantal downloads'
    },
    xAxis: {
        allowDecimals: false,
        categories: $scope.date
    },
    yAxis: {
        title: { text:'Donwloads' },
        floor: 0,
        ceiling: 10
    },
    tooltip: {
        pointFormat: '{series.name} <b>{point.y:,.0f}</b>'
    }
});
for(var i = 0; i < dataList.length; i++){
    addSeriesToChart(dataList[i].url, dataList[i].positions);
}

function addSeriesToChart(url, position){
    series = {
        name: url,
        data: position
    };
    chart.addSeries(series, true);
}

function filterSites(){
    var urlList = [];
    var urlPosList = [];
    for(var key in $scope.urlpos) urlList.push(key);
    for(var i = 0; i < urlList.length; i++){
        if(urlList[i].indexOf("leerzelfbeleggen.com") > -1 || urlList[i].indexOf("hoebeleggen.be") > -1 || urlList[i].indexOf("onlinebeleggen.info") > -1 || urlList[i].indexOf("allesoverbeleggen.com") > -1 || urlList[i].indexOf("beginbeleggen.nl") > -1){
            var dataObject = {
                url: urlList[i],
                positions: $scope.urlpos[urlList[i]]
            }
            urlPosList.push(dataObject);
        }
    }
    return urlPosList;
}

它创建了一些Series个对象,但它似乎为已经存在的系列增加了系列。请帮我弄清楚如何动态添加新系列。

0 个答案:

没有答案