highcharts java json_将JSON文件导入Highcharts以实现条形图可视化

我想创造一个

Highcharts

Bar Chart

JS Fiddle中的可视化。它将为客户的每一类访问(1次访问,2次访问,…)显示“年度客人价值”和“第一次和第二次访问之间的天数”。。。。29次以上的访问)。

现在我已经编写了可视化JS Fiddle,但是您必须手动输入数据。我想做一个更自动化的过程。我将拥有的数据是JSON格式的,我想知道如何创建一些函数来导入数据的JSON格式

.

我该怎么做?

我现在拥有的JSON数据是:

[

{

"Category": 1,

"Q1 / 18 (TTM) Annual Guest Value": 0,

"Days Between 1st and 2nd Visits": 23

},

{

"Category": 2,

"Q1 / 18 (TTM) Annual Guest Value": 96.6,

"Days Between 1st and 2nd Visits": 45

},

{

"Category": 3,

"Q1 / 18 (TTM) Annual Guest Value": 73.2,

"Days Between 1st and 2nd Visits": 65

},

{

"Category": 4,

"Q1 / 18 (TTM) Annual Guest Value": 60.3,

"Days Between 1st and 2nd Visits": 85

},

{

"Category": 5,

"Q1 / 18 (TTM) Annual Guest Value": 52.5,

"Days Between 1st and 2nd Visits": 105

},

{

"Category": 6,

"Q1 / 18 (TTM) Annual Guest Value": 46.6,

"Days Between 1st and 2nd Visits": 125

},

{

"Category": 7,

"Q1 / 18 (TTM) Annual Guest Value": 41.4,

"Days Between 1st and 2nd Visits": 144

},

{

"Category": 8,

"Q1 / 18 (TTM) Annual Guest Value": 37.5,

"Days Between 1st and 2nd Visits": 163

},

{

"Category": 9,

"Q1 / 18 (TTM) Annual Guest Value": 34.4,

"Days Between 1st and 2nd Visits": 179

},

{

"Category": 10,

"Q1 / 18 (TTM) Annual Guest Value": 31.9,

"Days Between 1st and 2nd Visits": 199

},

{

"Category": "11-17",

"Q1 / 18 (TTM) Annual Guest Value": 25.4,

"Days Between 1st and 2nd Visits": 258

},

{

"Category": "18-28",

"Q1 / 18 (TTM) Annual Guest Value": 17,

"Days Between 1st and 2nd Visits": 394

},

{

"Category": "29+",

"Q1 / 18 (TTM) Annual Guest Value": 9.7,

"Days Between 1st and 2nd Visits": 847

}

]

复制JSON数据并将其粘贴到代码中以使可视化对我来说很好,但我只希望现在的可视化效果相同。

Highcharts.chart('container', {

chart: {

type: 'bar'

},

title: {

text: null,

align: 'center',

verticalAlign: 'bottom',

},

xAxis: {

categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11-17', '18-28', '29+'],

title: {

text: 'Visits Per Customer (TTM)'

},

},

yAxis: {

min: 0,

gridLineWidth: 0,

minorGridLineWidth: 0,

title: {

text: 'Average Return Rate Overall: 64 Days',

y: 10

},

labels: {

overflow: 'justify'

}

},

tooltip: {

headerFormat: '{point.key}

pointFormat: '

{series.name}: ' +

'

{point.y:.0f} ',

footerFormat: '

',

shared: true,

useHTML: true

},

plotOptions: {

bar: {

dataLabels: {

enabled: true,

}

}

},

legend: {

layout: 'horizontal',

align: 'right',

verticalAlign: 'top',

x: -25,

y: 5,

floating: true,

borderWidth: 1,

backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

shadow: true

},

credits: {

enabled: false

},

series: [{

name: 'Q1 / 18 (TTM) Annual Guest Value',

data: [0, 96.6, 73.2, 60.3, 52.5, 46.6, 41.4, 37.5, 34.4, 31.9, 25.4, 17.0, 9.7],

color: 'grey',

// label color

dataLabels: {

style: {

color: 'grey'

}

}

}, {

name: 'Days Between 1st and 2nd Visits',

data: [23, 45, 65, 85, 105, 125, 144, 163, 179, 199, 258, 394, 847],

color: 'green',

// label color

dataLabels: {

style: {

color: 'green'

}

}

}]

});