Question

在这个小提琴中：http://jsfiddle.net/LLExL/5018/ 我在X轴上显示日期并在Y轴上计数。

我试图通过使用一个json片段显示多个图表来稍微概括一下。所以定义了这个修改过的json文件：

[
    {
        "header": "test1",
        "children": [
            {
                "date": "2015-01-02",
                "count": "36"
            },
            {
                "date": "2015-01-03",
                "count": "29"
            }
        ]
    },
    {
        "header": "test2",
        "children": [
            {
                "date": "2015-01-02",
                "count": "36"
            },
            {
                "date": "2015-01-03",
                "count": "29"
            }
        ]
    }
]

Highcharts是否支持这种类型的功能？如果是这样，它是如何实现的？上面的每个标题元素都是图表标题。

小提琴代码：

html  :

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 350px; height: 300px;"></div>

javascript : 

var pointStart = new Date().getTime();

var jsonString = '[ {"date":"2015-01-02","count":"36"} , {"date":"2015-01-03","count":"29"} ]';

var myData = JSON.parse(jsonString);
var data = []

var combinedHeights=[]

$.each(myData, function(i, obj) {
    var d = new Date(obj.date)
    data.push([Date.parse(d), parseInt(obj.count)])
    combinedHeights.push(parseInt(obj.count))
});
        jQuery(document).ready(function() { 

 $('#container').highcharts({
        chart       : { type    : 'line' },
         title: {
            text: 'test' // Title for the chart
        },
        subtitle    : { },
        legend      : { enabled : true },
        tooltip     : { },
        plotOptions : {
            series  : {
                pointStart      : pointStart,
                pointInterval   : 24 * 3600 * 1000 * 30
            }
        },
        xAxis      : { 

            type           : 'datetime'
        },
        yAxis: {
        minPadding:0,
        maxPadding:0,
        gridLineColor:'rgba(204,204,204,.25)',
        gridLineWidth:0.5,
        title: { 
            text: 'Access Count',
            rotation:0,
            textAlign:'right',
            style:{ 
                color:'rgba(0,0,0,.9)',
            }
        },
        labels: { 
            style: {
                color: 'rgba(0,0,0,.9)',
                fontSize:'9px'
            }
        },
        lineWidth:.5,
        lineColor:'rgba(0,0,0,.5)',
        tickWidth:.5,
        tickLength:3,
        tickColor:'rgba(0,0,0,.75)'
    }
    }); 
    var chart = $('#container').highcharts();
    chart.addSeries({ 
        data: data    
    });

    });

更新：

http://jsfiddle.net/LLExL/5081/

Code : 

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container0" style="width: 350px; height: 300px;"></div>
<div id="container1" style="width: 350px; height: 300px;"></div>


jQuery(document).ready(function() { 

    var jsonString2 = '[ { "header": "test1", "children": [ { "date": "2015-01-02", "count": "36" }, { "date": "2015-01-03", "count": "29" } ] }, { "header": "test2", "children": [ { "date": "2015-01-02", "count": "16" }, { "date": "2015-01-03", "count": "15" } ] } ]'

    var myData = JSON.parse(jsonString2);

    $.each(myData, function(i, obj) {
        create(JSON.stringify(obj) , 'container'+i)
    });


    var jsonString = '{ "header": "tester", "children": [ { "date": "2015-01-02", "count": "76" }, { "date": "2015-01-03", "count": "29" } ] }'

   // for (i = 1; i <= 2; i++) { 
    // create(jsonString , 'container'+i)
//  }


function create(jsonString , containerName) {
var pointStart = new Date().getTime();

var myData = JSON.parse(jsonString);
var data = []

var combinedHeights=[]

$.each(myData.children, function(i, obj) {
    var d = new Date(obj.date)
    data.push([Date.parse(d), parseInt(obj.count)])
    combinedHeights.push(parseInt(obj.count))
});

 $('#'+containerName).highcharts({
        chart       : { type    : 'line' },
         title: {
            text: myData.header // Title for the chart
        },
        subtitle    : { },
        legend      : { enabled : true },
        tooltip     : { },
        plotOptions : {
            series  : {
                pointStart      : pointStart,
                pointInterval   : 24 * 3600 * 1000 * 30
            }
        },
        xAxis      : { 

            type           : 'datetime'
        },
        yAxis: {
        minPadding:0,
        maxPadding:0,
        gridLineColor:'rgba(204,204,204,.25)',
        gridLineWidth:0.5,
        title: { 
            text: 'Access Count',
            rotation:0,
            textAlign:'right',
            style:{ 
                color:'rgba(0,0,0,.9)',
            }
        },
        labels: { 
            style: {
                color: 'rgba(0,0,0,.9)',
                fontSize:'9px'
            }
        },
        lineWidth:.5,
        lineColor:'rgba(0,0,0,.5)',
        tickWidth:.5,
        tickLength:3,
        tickColor:'rgba(0,0,0,.75)'
    }
    }); 
    var chart = $('#'+containerName).highcharts();
    chart.addSeries({ 
        data: data    
    });
}
    });

Answer 1

试试http://jsfiddle.net/Paulson/LLExL/5082/

var pointStart = new Date().getTime();

var jsonString = '[{"header":"test1","children":[{"date":"2015-01-02","count":"36"},{"date":"2015-01-03","count":"29"}]},{"header":"test2","children":[{"date":"2015-01-02","count":"29"},{"date":"2015-01-03","count":"36"}]}]';

var myData = JSON.parse(jsonString);
var data = []

var combinedHeights=[]

$.each(myData, function(i, obj1) {
    var newData = [];
    $.each(obj1['children'], function(i, obj2) {
        var d = new Date(obj2.date)
        newData.push([Date.parse(d), parseInt(obj2.count)])
    });
    data.push(newData);
});
jQuery(document).ready(function() { 

 $('#container').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'test' // Title for the chart
        },
        legend: { enabled : true },
        plotOptions: {
            series: {
                pointStart: pointStart,
                pointInterval: 24 * 3600 * 1000 * 30
            }
        },
        xAxis: { 
            type: 'datetime'
        },
        yAxis: {
            minPadding:0,
            maxPadding:0,
            gridLineColor:'rgba(204,204,204,.25)',
            gridLineWidth:0.5,
            title: { 
                text: 'Access Count',
                rotation:0,
                textAlign:'right',
                style:{ 
                    color:'rgba(0,0,0,.9)',
                }
            },
            labels: { 
                style: {
                    color: 'rgba(0,0,0,.9)',
                    fontSize:'9px'
                }
            },
            lineWidth:.5,
            lineColor:'rgba(0,0,0,.5)',
            tickWidth:.5,
            tickLength:3,
            tickColor:'rgba(0,0,0,.75)'
        },
        series: [{
            data: data[0]
        }]
    });
$('#container2').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'test' // Title for the chart
        },
        legend: { enabled : true },
        plotOptions: {
            series: {
                pointStart: pointStart,
                pointInterval: 24 * 3600 * 1000 * 30
            }
        },
        xAxis: { 
            type: 'datetime'
        },
        yAxis: {
            minPadding:0,
            maxPadding:0,
            gridLineColor:'rgba(204,204,204,.25)',
            gridLineWidth:0.5,
            title: { 
                text: 'Access Count',
                rotation:0,
                textAlign:'right',
                style:{ 
                    color:'rgba(0,0,0,.9)',
                }
            },
            labels: { 
                style: {
                    color: 'rgba(0,0,0,.9)',
                    fontSize:'9px'
                }
            },
            lineWidth:.5,
            lineColor:'rgba(0,0,0,.5)',
            tickWidth:.5,
            tickLength:3,
            tickColor:'rgba(0,0,0,.75)'
        },
        series: [{
            data: data[1]
        }]
    }); 
});

Answer 2

您可以准备解析器，它会放置一个新的div并创建图表解析数据。选项可以是常用对象，但需要使用$ .extend（），避免使用相同的引用。

分析器：

window.location = 'http://somewhere';

示例：http://jsfiddle.net/LLExL/5085/

从单个json显示多个Highcharts

2 个答案: