Highcharts - 加载 json 数据

发布于 2025-01-08 19:07:11 字数 255 浏览 0 评论 0原文

我正在开发一个新项目，并使用 highchart 进行图表创建。我使用数据库中的一些数据创建了一个 json 文件：

[{"date": "2012-02-23", "number": 2}, {"date": "2012-02-21", "number": 4]

如何将此数据添加到 Highcharts->Chart->Series->Data？

原文

I am working on a new project and using highchart for chart creation. I created a json file with some data from database:

[{"date": "2012-02-23", "number": 2}, {"date": "2012-02-21", "number": 4]

How do i can add this data to Highcharts->Chart->Series->Data?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生生漫 2025-01-15 19:07:11

找到下面的代码。这将显示 JSON 中存在的数据的柱形图。

 <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
            var data=[{"date": "2012-02-23", "number": 2}, {"date": "2012-02-21", "number": 4}];
            var chart = new Highcharts.Chart(
              {
                chart:{
                    renderTo: "container", // the div id where you want to dispaly the chart
                    type: 'column',        // type of chart as colum chart, it can be anything-'bar','pie','column' etc.
                    height: 300
                },
                title: {
                    text: "Numbers on two different dates"
                },
                xAxis: {
                    categories: [data[0]["date"],data[1]["date"]]
                },
                yAxis: {
                    title: {
                        text: 'Numbers on date'
                    }
                },
                series: [{name:"numbers",data:[data[0]["number"],data[1]["number"]]}]
            }  
        );          
    });
    </script>
    </head>
    <body>
    <div id="container">
    </div>
    </body>
    </html>

Find the code below. This displays the column chart for the data present in the JSON.

 <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
            var data=[{"date": "2012-02-23", "number": 2}, {"date": "2012-02-21", "number": 4}];
            var chart = new Highcharts.Chart(
              {
                chart:{
                    renderTo: "container", // the div id where you want to dispaly the chart
                    type: 'column',        // type of chart as colum chart, it can be anything-'bar','pie','column' etc.
                    height: 300
                },
                title: {
                    text: "Numbers on two different dates"
                },
                xAxis: {
                    categories: [data[0]["date"],data[1]["date"]]
                },
                yAxis: {
                    title: {
                        text: 'Numbers on date'
                    }
                },
                series: [{name:"numbers",data:[data[0]["number"],data[1]["number"]]}]
            }  
        );          
    });
    </script>
    </head>
    <body>
    <div id="container">
    </div>
    </body>
    </html>

回复收藏 0 原文

~没有更多了~