JSON对象到高图 [英] JSON object to highchart

问题描述

嗨


我是JSON的新手，所以想问你如何传递返回的JSON数据并将其直接放入Highcharts。这是我的数据：

 JSON = [{name：Book，data：[14,17,9,10,6,19,6， 8,0,4]}，{name：Book Chapter，data：[65,74,44,66,9,23,36,51,53,36]}，
 { 名称：会议记录，数据：[15,17,27,30,28,54,35,43,50,35]}，{名称：期刊文章，数据： [178,162,133,139,133,191,160,194,149,169]}] 

如果我把它直接放在这个系列：JSON中，它不起作用，但如果我手动指定那么它确实。我不知道为什么。请帮忙。



问候

Buksh



我是什么尝试过：



尝试使用以下内容，

 $（'＃chartTrendsPublicationRankDetailed'） .highcharts（{
 chart：{
 type：'line'
}，
 title：{
 text：'我的数据'
}，
 xAxis：{
类别：['2007'，'2008'，'2009'，'2010'，'2011'，'2012'，'2013'，'2014'，'2015'，' 2016'] 
}，
系列：[{name：Book，data：[14,17,9,10,6,19,6,8,0,4] }，{name：Book Chapter，data：[65,74,44,66,9,23,36,51,53,36]}，{name：Conference Proceedings，数据：[15,17,27,30,28,54,35,43,50,35]}，{name：Journal Article，data：[178,162,133,139,133 ，191,160,194,149,169]}] 
 
}）; 
 

这样可行，但我需要传递变量并手动指定。

解决方案

（'＃chartTrendsPublicationRankDetailed'）。highcharts（{
chart：{
type：'line'
}，
title：{
text：'我的数据'
}，
xAxis：{
类别：['2007'，'2008'，'2009'，'2010'，'2011'，'2012' ，'2013'，'2014'，'2015'，'2016']
}，
系列：[{name：Book，data：[14,17,9， 10,6,19,6,8,0,4]}，{名称：书籍章节，数据：[65,74,44,66,9,23,36,51,53,36 ]}，{name：Conference Proceedings，data：[15,17,27,30,28,54,35,43,50,35]}，{name：Journal Article， 数据：[178,162,133,139,133,191,160,194,149,169]}]

}）;

这样可行，但我需要传递变量并手动指定。

< blockquote>好的，我只是根据呈现的内容进行猜测。您的应用程序有一个highcharts图表和API返回的系列数据（JSON格式）？我进一步假设返回数据存储在一个名为JSON的变量中？如果是这种情况，您可能需要重命名它，这有点令人困惑。当您将变量插入到系列中时，图表不会显示任何内容（空白）？但是，如果你直接粘贴数据，它有用吗？



我假设数据是以字符串形式返回的？如果是这种情况，则需要在代码中添加一行，以使用JSON.parse（）方法将字符串解析为JSON。这是一个例子。另外，请确保数据中没有换行符，所有内容都应该在一个长字符串中。



Highcharts演示 - JSON字符串 [ ^ ]

上一个highcharts呈现代码：

Hi
I am new to JSON so wanted to ask you how to pass the returned JSON data and put it directly into Highcharts. This is my data:

JSON = [{"name":"Book","data":[14,17,9,10,6,19,6,8,0,4]},{"name":"Book Chapter","data":[65,74,44,66,9,23,36,51,53,36]},
{"name":"Conference Proceedings","data":[15,17,27,30,28,54,35,43,50,35]},{"name":"Journal Article","data":[178,162,133,139,133,191,160,194,149,169]}]

If I put that directly like this Series: JSON, it does not work, but if I specify manually then it does. I do not know why. Please help.

Regards
Buksh

What I have tried:

Have tried using the below,

$('#chartTrendsPublicationRankDetailed').highcharts({
           chart: {
               type: 'line'
           },
           title: {
               text: 'My data'
           },
           xAxis: {
               categories: ['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016']
           },
           series: [{ "name": "Book", "data": [14, 17, 9, 10, 6, 19, 6, 8, 0, 4] }, { "name": "Book Chapter", "data": [65, 74, 44, 66, 9, 23, 36, 51, 53, 36] }, { "name": "Conference Proceedings", "data": [15, 17, 27, 30, 28, 54, 35, 43, 50, 35] }, { "name": "Journal Article", "data": [178, 162, 133, 139, 133, 191, 160, 194, 149, 169] }]

       });

This works, but I need to pass the variable and specify manually.

解决方案

('#chartTrendsPublicationRankDetailed').highcharts({ chart: { type: 'line' }, title: { text: 'My data' }, xAxis: { categories: ['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'] }, series: [{ "name": "Book", "data": [14, 17, 9, 10, 6, 19, 6, 8, 0, 4] }, { "name": "Book Chapter", "data": [65, 74, 44, 66, 9, 23, 36, 51, 53, 36] }, { "name": "Conference Proceedings", "data": [15, 17, 27, 30, 28, 54, 35, 43, 50, 35] }, { "name": "Journal Article", "data": [178, 162, 133, 139, 133, 191, 160, 194, 149, 169] }] });

This works, but I need to pass the variable and specify manually.

Ok, I'm just guessing based on what was presented. Your application has a highcharts charts and the series data (JSON format) return by an API? I further assumed that the return data is stored in a variable called JSON? You might have to rename it if that the case, it kinda confusing. When you plug in the variable to the series, the charts show nothing (blank)? But if you paste the data directly, it worked?

I'm assuming the data was being returned as a string? If that the case, you need to add a line in the code to parse the string into JSON using JSON.parse() method. Here is an example. Also, make sure there are no line break in the data, everything should be in one long string.

Highcharts Demo - JSON String[^]

Previous highcharts rendering code:

这篇关于JSON对象到高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！