如何使用外部JSON文件构建Highchart

任何人都可以在此处共享一个基本的高清代码，该代码来自外部JSON文件？

我尝试阅读与我的帖子相关的所有材料，但我仍然无法使用 getjson 来创建高图，希望任何人都可以在这里分享您的想法，谢谢。

这是我的JSON文件的某个部分：

  [
     {
         "indicator": "ClassC",
         "month": 201611,
         "ww": 201648,
         "test_time": 0.0,
         "p": 48.0,
         "Product": "RB"
     },
     {
         "indicator": "ClassC",
         "month": 201612,
         "ww": 201649,
         "test_time": 47.48,
         "p": 48.0,
         "Product": "RB"
     },
     ...
 ]

只需检查此小提琴即可。您可能会发现答案在这里

https://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/highcharts/tree/master/master/samples/highcharts/demo/demo/line-basic/

，还检查那里使用的API。您可以找到返回的JSON格式

https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?.

更新的代码

$.getJSON('your url', function (data) {
var datas = JSON.parse(data)
var myArray = [];
for(var i in datas ) {
    myArray.push(datas[i]);
}
var mydata = myArray.map(i=>([i.month,i.p]));
    // Create the chart
    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 1
        },
        title: {
            text: 'AAPL Stock Price'
        },
        series: [{
            name: 'AAPL',
            data: mydata,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});

var数据部分应替换为$ .getjson

的数据

这是外部数据的HighChart(气泡图和Guage图表(的完整代码

html＆amp;JavaScript

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<style>
.highcharts-point-select{
stroke: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6" id="container1"></div>
<div class="col-md-6" id="container2"></div>
</div>
<script>
$.getJSON(
    'http://localhost/highcharts/bubble-chart/bubblechart.json',
     function (data) {
Highcharts.chart('container1', {
    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },
   xAxis: {
        gridLineWidth: 1
    },
     plotOptions: {
        series: {
            allowPointSelect: true,
            marker: {
                states: {
                    select: {
                        fillColor : 'orange'
                    }
                }
            }
        }
    },
   yAxis: {
        startOnTick: false,
        endOnTick: false
    },

    series: [{
       data: data,
        color: 'green',
    }   ]
});
Highcharts.chart('container2', {
    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },
    title: {
        text: 'Speedometer'
    },
    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },
    // the value axis
    yAxis: {
        min: 0,
        max: 200,
        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',
        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'km/h'
        },
        plotBands: [{
            from: 0,
            to: 120,
            color: '#55BF3B' // green
        }, {
            from: 120,
            to: 160,
            color: '#DDDF0D' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#DF5353' // red
        }]
    },
    series: [{
        name: 'Speed',
        data: data[7],
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]
},
// Add some life
function (chart) {
    if (!chart.renderer.forExport) {
        setInterval(function () {
            var point = chart.series[0].points[0],
                newVal,
                inc = Math.round((Math.random() - 0.5) * 20);
            newVal = point.y + inc;
            if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
            }
            point.update(newVal);
        }, 3000);
    }
});
});
</script>
</body>
</html>

bubblechart.json

[
    [9, 81, 103],
    [98, 5, 89],
    [51, 50, 73],
    [41, 22, 14],
    [58, 24, 20],
    [78, 37, 34],
    [55, 56, 53],
    [91]
]

html＆amp;JavaScript

bubblechart.json

相关内容

最新更新

热门标签：