[英]Formatting JSON from a Pandas data frame for Highcharts within a Django template
I have a Pandas data frame that I have converted to JSON like so: 我有一个已转换为JSON的Pandas数据框,如下所示:
json_data = data_df.to_json()
The original data frame looks like something similar to this: 原始数据框看起来类似于以下内容:
col1 col2 col3 col4
0 1 2 2 -1
1 2 4 3 -2
2 3 6 4 -3
3 4 8 5 -4
4 5 10 6 -5
...
And the JSON string looks similar to this: JSON字符串与此类似:
[{"col1":1,"col2":2,"col3":2,"col4":-1},{"col1":2,"col2":4,"col3":3,"col4":-2},{"col1":3,"col2":6,"col3":4,"col4":-3},{"col1":4,"col2":8,"col3":5,"col4":-4}]
My Highcharts
implementation is as follows: 我的
Highcharts
实现如下:
$(document).ready(function() {
var my_data = '{{ json_data }}'
// create data chart
$('#container').highcharts({
chart: {
renderTo: 'chart_panel',
type: 'line',
},
legend: {layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
},
title: {text: 'Roehrig Damper Data',
x: -20 // center title
},
xAxis: {title: {text: 'Velocity (m/sec)'}},
yAxis: {title: {text: 'Force (N)'}},
series: [ {data: my_data} ],
});
});
The {{ json_data }}
is from my Django python view and I have confirmed that it's properly formatted through the browser console. {{ json_data }}
来自我的Django python视图,我已经确认通过浏览器控制台正确设置了格式。 Currently my code is only displaying a blank Highcharts
chart with zero data being populated. 目前,我的代码仅显示空白的
Highcharts
图表,其中填充了零数据。 I have tried a few different ways to manipulate the data that I desire, but without success. 我尝试了几种不同的方式来操纵所需的数据,但是没有成功。
My goal is to plot col2
against col1
and on the same chart plot col4
against col3
, or in other words the x-axis will be defined by both col1
and col3
. 我的目标是将
col2
对于col1
绘制,并在同一图表col4
对于col3
绘制,换句话说,x轴将同时由col1
和col3
定义。
Is there a way to accomplish my goal stated above, and if so, how? 有没有一种方法可以实现上述目标,如果可以,该如何实现?
With the help of @Andrew_Lvov I now have a JSON object that looks like this: 在@Andrew_Lvov的帮助下,我现在有了一个看起来像这样的JSON对象:
json_data = [
{
'name': "col1",
'data': array([1, 2, 3, 4, 5])},
{
'name': "col2",
'data': array([2, 4, 6, 8, 10])},
// etc.
]
Now my problem is that it is adding the word array
to the data. 现在我的问题是它将单词
array
添加到数据中。
Try 尝试
var myData = {{ json_data | safe }};
UPDATE : 更新 :
Your data should be in format: 您的数据应采用以下格式:
json_data = [
{
'name': "col1",
'data': [1, 2, 3, 4, 5]},
{
'name': "col2",
'data': [2, 4, 6, 8, 10]},
]
Series parameter: 系列参数:
series: myData
UPDATE #2: 更新#2:
json_data = [{'data': list(value.values), 'name': key} for key, value in data_df.items()]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.