简体   繁体   English

highcharts:在向下钻取中使用JSON

[英]highcharts: use JSON in drilldown

I'm new to the forum and hope to get help to complete my chart! 我是该论坛的新手,希望获得帮助以完成我的图表! My problem is to call a json file in the drilldown; 我的问题是在钻取中调用json文件; this is the result I would get by calling the json (for example) http://jsfiddle.net/1dmaduwg/2/ and this is the html code and json code that I wrote to call the first json file. 这是我通过调用json(例如) http://jsfiddle.net/1dmaduwg/2/所得到的结果,这是我编写的用于调用第一个json文件的html代码和json代码。

HTML HTML

<!DOCTYPE html>

    <html>
    <head>
        <title>CHART_1</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>    
    </head>

    <body>
        <h1 style="background: center; text-align: center; color: #E52B50"> ----------> TEST HIGHTCHARTS <----------</h1>
    <div id="container" style="width: auto; height: 400px; max-width: 1000px; margin: auto">
    <script type="text/javascript">
    $(function () {
        Highcharts.setOptions({
            colors: ['#C80815', '#404040']
        });

    $(document).ready(function() {

             var options = {
                    chart: {
                        renderTo: 'container',


                   backgroundColor: '#EFEFEF', 
                   borderColor: '#FF0000', 
                   borderWidth: 2, 
                   borderRadius: 10, 
                   inverted: false, 
                   type: 'column'
                    },
                    title: {
                        text: 'ACTIVITIES MANAGEMENT ',
                        x: -20 
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: 'Activity'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                this.x +': '+ this.y;
                        }
                    },
                    legend: {
                        enabled: true
                    },
                plotOptions: {   
                   column: {

                   dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'},
                }
                },

                    series: [],

             }

                $.getJSON("test_1.json", function(json) {
                    options.xAxis.categories = json[0]['data'];
                    options.series[0] = json[2];            
                    options.series[1] = json[3];
                    chart = new Highcharts.Chart(options);
                });
            });
          });

    </script>
    </div>

    </body>
    </html>

test_1.json test_1.json

[
{
"name": "user_name",
"data": ["user_1", "user_2", "user_3", "user_4"]
},
{
"name": "user_id",
"data": ["052193002", "052193007", "052193013", "052193004"]
},
{
"name": "MANAGED",
"data": [52, 13, 42, 10]
},
{
"name": "TO MANAGE",
"data": [12, 3, 32, 1]
}
]

when I click on a column or user name I want the right data for each user in a drilldown series. 当我单击列或用户名时,我希望在向下钻取系列中为每个用户提供正确的数据。 is the right way to go or I have to make changes to json (test_2) to separate the data? 是正确的方法还是我必须对json(test_2)进行更改以分离数据?

can anyone help me to write the exact code to insert test_2.json into the Drilldown? 谁能帮助我编写确切的代码以将test_2.json插入到Drilldown中?

test_2.json test_2.json

//USER_1
[
{
"name": "activity_name",
"data": [ "Activity 1", "Activity 2", "Activity 3"]
},
{
"name": "MANAGED",
"data": [13, 12, 27]
},
{
"name": "TO MANAGE",
"data": [3, 4, 5]
}
],
//USER_2
[
{
"name": "activity_name",
"data": [ "Activity 1", "Activity 2", "Activity 3"]
},
{
"name": "MANAGED",
"data": [3, 7, 3]
},
{
"name": "TO MANAGE",
"data": [1, 0, 2]
}
],
//USER_3
[
{
"name": "activity_name",
"data": [ "Activity 1", "Activity 2", "Activity 3"]
},
{
"name": "MANAGED",
"data": [13, 17, 12]
},
{
"name": "TO MANAGE",
"data": [13, 7, 12]
}
],
//USER_4
[
{
"name": "activity_name",
"data": [ "Activity 1", "Activity 2", "Activity 3"]
},
{
"name": "MANAGED",
"data": [5, 3, 2]
},
{
"name": "TO MANAGE",
"data": [0, 0, 1]
}
]

thank you all!! 谢谢你们!!

I would vote for separate files. 我会为单独的文件投票。

It would be optimal (better performance for the chart and lower bandwidth for the connection) to do not force user to download not needed data. 最好不要强迫用户下载不需要的数据(图表的性能更好,连接的带宽更低)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM