我想创造一个
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'
}
}
}]
});