Question

尝试使用json文件中的温度数据加载标记。

以下代码适用于加载多个温度数据系列，但我无法解决如何以相同方式添加标记的问题。

有什么想法吗？

  $.each(names, function(i, name) {
    //this will go thru each location and load the json data to be charted, ie
    //json_hs_temps.php?location=outside1  <-- temperature data
    //json_hs_temps.php?location=inside    <-- temperature data
    //json_hs_temps.php?location=owntracks <-- flag data

        $.getJSON("jsonloaddata.php?location="+ name.toLowerCase(), function(data) {
            console.log( "success with grabing json data for " + name.toLowerCase());

            if(name != 'owntracks'){
                //temperature data, outside1, inside
                seriesOptions[i] = {
                    name: name + ' Temperature',
                    data: data,
                    color: colors[i],
                    id: 'dataseries',
                    type: 'line'
                };
            } else {
                //flags or events, enter/leave house
                seriesOptions[i] = ({
                        type: 'flags',
                        showInLegend: true,
                        shape: 'circlepin',
                        onSeries: 'dataseries',
                        data: data
                });
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == names.length) {
                createChart();
            }
        });
    });

Full code for above here

返回＆＃39; outside1＆＃39;;

的JSON数据

[[1405681202000,8.8],[1405684858000,8.8],[1405688443000,8.8],[1405692029000,8.6],[1405695615000,8.8],[1405699200000,8.9],[1405702855000,9],[1405706441000,9.2],[1405710026000,9.2],[1405713611000,9.2],[1405717267000,9.3],[1405720852000,9.6],[1405724438000,10.2],[1405728023000,10.5],[1405731609000,11],[1405735265000,11.3],[1405738850000,11.3],[1405742436000,11.1],[1405746021000,10.9],[1405749607000,10.5],[1405753263000,10.1],[1405756848000,10.2],[1405760434000,10],[1405764019000,10.1],[1405767605000,10],[1405771260000,9.6],[1405774846000,9.6],[1405778431000,9.3],[1405782017000,9.2],[1405785602000,9.1],[1405789258000,8.8],[1405792843000,8.5],[1405796429000,8.1],[1405800014000,8.1],[1405803670000,8.3],[1405807255000,8.7],[1405810841000,9.1],[1405814426000,9.5],[1405818012000,10.2],[1405821667000,10.9],[1405825253000,11.5],[1405828838000,11.7],[1405832424000,11.6],[1405836009000,11.2],[1405839665000,10.3],[1405843251000,9.5],[1405846836000,8.5],[1405850422000,8],[1405854007000,7.6],[1405857663000,7.3],[1405861248000,7],[1405864834000,6.6],[1405868419000,6.2],[1405872005000,6.1],[1405875660000,5.7],[1405879246000,5.8],[1405882831000,5.9],[1405886417000,6],[1405890002000,6],[1405893658000,6.4],[1405897243000,7.6],[1405900829000,8.8],[1405904414000,9.4],[1405908000000,10.2],[1405911655000,10.6],[1405915241000,10.6],[1405918826000,10.6],[1405922412000,10],[1405926068000,9.3],[1405929653000,9.6],[1405933239000,8.5],[1405936824000,7.7],[1405940409000,6.9],[1405944065000,6.2],[1405947651000,5.8],[1405951236000,5.4],[1405954821000,5.1],[1405958407000,5],[1405962063000,4.8],[1405965648000,4.8],[1405969233000,4.4],[1405972819000,4.5],[1405976404000,4.3],[1405980060000,4.8],[1405983645000,5.5],[1405987231000,6.3],[1405990816000,6.9],[1405994402000,7.5],[1405998058000,7.9],[1406001643000,8.3],[1406005228000,8],[1406008814000,7.2],[1406012469000,6.4],[1406016055000,7],[1406019640000,6.9],[1406023226000,6.9],[1406026811000,7.5],[1406030467000,7.6],[1406034052000,7.7],[1406037638000,7.6],[1406041223000,7.6],[1406044809000,7.5],[1406048464000,7.1],[1406052050000,6.9],[1406055635000,6.5],[1406059221000,5.9],[1406062806000,5.5],[1406066462000,5.4],[1406070047000,6.2],[1406073633000,6.9],[1406077218000,8],[1406080804000,9.2],[1406084459000,10.5],[1406088045000,11],[1406091631000,10.9],[1406095216000,10.4],[1406098801000,9.6],[1406107577000,7.9],[1406109616000,7.4],[1406113202000,7]]

为＆＃39; owntracks＆＃39;;

返回的JSON数据

[{"x":1405584416,"title":"1","text":"matthew enter home"},{"x":1405584884,"title":"1","text":"joanne enter home"},{"x":1405597925,"title":"1","text":"joanne enter home"},{"x":1405621940,"title":"1","text":"joanne enter home"},{"x":1405605734,"title":"1","text":"joanne enter home"},{"x":1405616039,"title":"1","text":"joanne enter home"},{"x":1405629503,"title":"1","text":"joanne enter home"},{"x":1405632049,"title":"0","text":"joanne leave home"},{"x":1405634418,"title":"0","text":"matthew leave home"}]

它工作的截图，除了标志！ chart

更新 - 现在工作

因此，在尝试添加标志之前，JSON文件没有完全加载。

在继续之前已更改为使用ajax调用并等待它们完成。

我已将完整代码放在github上，链接在上面。

我用来获取温度数据的ajax调用示例，标志数据我做同样的方式，但我等到所有温度数据都已加载。

$.ajax({
    url:"jsonloaddata.php?interval="+interval+"&location="+ name.toLowerCase()+"&querytype="+querytype.toLowerCase(), 
    dataType:'json',
    async:false,
    success:function(data) {
            // do stuff.
            console.log( "success with grabing json data for " + name.toLowerCase());
            seriesOptions[i] = {
                name: name + ' Temperature',
                data: data,
                color: colors[i],
                id: 'dataseries',
                type: 'line',
                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
                    valueDecimals: 1
                }
            };

        }
    })

结果...... fixed

Answer 1

您需要另外一个具有标记类型的系列，例如：http://www.highcharts.com/stock/demo/flags-placement

尝试使用json文件中的温度数据加载标志

1 个答案: