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

我试图在JS Fiddle中创建一个可视化。它将为客户的每类访问（1次访问、2次访问、29次以上访问）可视化“年度客人价值”和“第一次和第二次访问之间的天数”

现在，我已经编写了可视化JS小提琴，但您必须手动输入数据。我想做一个更自动化的流程。我将拥有的数据是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文件

复制JSON数据并将其粘贴到代码中以实现可视化对我来说很好，但我只希望现在的可视化与以前一样

我真的很感激你的帮助。谢谢

Highcharts.chart（'container'{
图表：{
类型：'bar'
},
标题：{
文本：空，
对齐：'居中'，
垂直排列：“底部”，
},
xAxis：{
类别：['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9'，'10'，'11-17'，'18-28'，'29+'，
标题：{
文本：“每位客户的访问量（TTM）”
},
},
亚克斯：{
分:0,，
网格线宽：0，
minorGridLineWidth:0，
标题：{
文本：“总体平均回报率：64天”，
y:10
},
标签：{
溢出：'justify'
}
},
工具提示：{
headerFormat:“{point.key}”，
pointFormat:“{series.name}:”+
“{point.y:.0f}”，
页脚格式：“”，
分享：是的，
useHTML:true
},
打印选项：{
酒吧：{
数据标签：{
启用：对，
}
}
},
图例：{
布局：“水平”，
对齐：“右”，
垂直排列：“顶部”，
x:-25，
y:5，
浮动：是的，
边框宽度：1，
背景颜色：（（Highcharts.theme&&Highcharts.theme.legendBackgroundColor）| |'#FFFFFF'），
影子：对
},
学分：{
已启用：false
},
系列：[{
名称：“2018年第1季度（TTM）年度客人价值”，
数据：[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]，
颜色：“灰色”，
//标签颜色
数据标签：{
风格：{
颜色：“灰色”
}
}
}, {
名称：“第一次和第二次访问之间的天数”，
数据：[23,45,65,85,105,125,144,163,179,199,258,394,847]，
颜色：“绿色”，
//标签颜色
数据标签：{
风格：{
颜色：“绿色”
}
}
}]
});
您可以通过以下步骤执行此操作：

用python或Php创建API，返回JSON数据
向该API发出ajax请求
在Highchart.js中使用从ajax请求返回的JSON数据
或者，不使用API，您可以将JSON数据直接存储在JSON文件中，并用Javascript读取文件。如果您的文件名是
data.json
，那么

<script type="text/javascript" src="data.json"></script>
var mydata = JSON.parse(data);

您当前的JSON数据没有正确的键命名约定
Q1/18（TTM）年度访客值
和
第一次和第二次访问之间的天数
应该是这样的
访客值
和
访问
。有关JSON命名约定的更多信息，请查看

首先，您需要创建一个有效且正确的数据JSON，然后您可以迭代该JSON，并创建
guestValue
和
访问的独立数组。最后将这些数组传递给Highchart

下面是完整的工作示例


var myJson=[{“类别”：1，“顾客价值”：0，“访问”：23}，{“类别”：2，“顾客价值”：96.6，“访问”：45}，{“类别”：3，“顾客价值”：73.2，“访问”：65}，{“类别”：4，“顾客价值”：60.3，“访问”：85}，{“类别”：5，“顾客价值”：52.5，“访问”：105}，{“类别”：6，“顾客价值”：46.6，“访问”：125}，{“类别”：7，“顾客价值”：41.4，“访问”：144}，“访客价值”：37.5，“访问量”：163}，{“类别”：9，“访客价值”：34.4，“访问量”：179}，{“类别”：10，“访客价值”：31.9，“访问量”：199}，{“类别”：“11-17”，“访客价值”：25.4，“访问量”：258}，{“类别”：“18-28”，“访客价值”：17，“访问量”：394}，{“类别”：“29+”，“访客价值”：9.7，“访问量”：847}；
var guestValue=[]；
var访问=[]；
对于（i=0；imydata[0].name
mydata[0].color