Javascript 动态地将系列添加到highcharts
我对海图比较陌生，所以我没有那么渊博。 但我要做的是，我试图用一个名称和一些x，y值动态创建一个系列。要获得x和y值，我使用两个字典，如下所示：Javascript 动态地将系列添加到highcharts,javascript,python,django,highcharts,Javascript,Python,Django,Highcharts,我对海图比较陌生，所以我没有那么渊博。 但我要做的是，我试图用一个名称和一些x，y值动态创建一个系列。要获得x和y值，我使用两个字典，如下所示： $('#container').highcharts({ chart:{ type: 'column', events:{
$('#container').highcharts({
chart:{
type: 'column',
events:{
load: function(){
RedrawColumns(this)
},
redraw: function(){
RedrawColumns(this)
}
}
},
title:{
text: 'Time worked by {{user_to_show}}'
},
subtitle:{
text:'{{user_to_show}}´s flex time: '
},
tooltip:{
formatter: function (){
var text = 'Date: ' + this.x + '<br>' + 'Time: ' + secondsTimeSpanToHMS(this.y/1000) +
'<br>' +'Extra info:' + {{extra_info|safe}}[this.x];
return text;
}
},
xAxis:
{
categories: {{all_dates|safe}}
},
yAxis:
[{
title:
{
text: '' //If it isnt given '' it will display "value" so using '' to hide it
},
gridLineWidth: 1,
type: 'datetime', //y-axis will be in milliseconds
dateTimeLabelFormats:
{ //force all formats to be hour:minute:second
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
},
opposite: true
}],
plotOptions:
{
series:
{
dataLabels:
{
enabled: true,
formatter: function()
{
if( this.series.index == 0 )
{
return secondsTimeSpanToHMS(this.y/1000) ;
}
else
{
return this.y;
}
}
}
}
},
series:
[{
}]
});
});
Y值。它们是秒 我要做的是创建一个序列，其中包含关键点的名称，然后它们可以有多个x，y值的点 例如，在“Fiber_äMätning”中，我在两个字典的键中都有两个值。我想做的是，我创建了一个名为“Fiber_Mätning”的系列，然后它应该有两个点，在这里我同时给出x和y值 因此，“光纤制造”的第一点是x:“2020-10-28”y:“28800” 第二点是“光纤制造”的x:“2020-10-29”y:“18000” 在那之后，我会继续在两个字典中的下一个键上做同样的事情。因此，我创建序列的方式需要是一个函数，该函数根据字典中的键和值的数量动态创建序列和点 当前我的highchart代码如下所示：
$('#container').highcharts({
chart:{
type: 'column',
events:{
load: function(){
RedrawColumns(this)
},
redraw: function(){
RedrawColumns(this)
}
}
},
title:{
text: 'Time worked by {{user_to_show}}'
},
subtitle:{
text:'{{user_to_show}}´s flex time: '
},
tooltip:{
formatter: function (){
var text = 'Date: ' + this.x + '<br>' + 'Time: ' + secondsTimeSpanToHMS(this.y/1000) +
'<br>' +'Extra info:' + {{extra_info|safe}}[this.x];
return text;
}
},
xAxis:
{
categories: {{all_dates|safe}}
},
yAxis:
[{
title:
{
text: '' //If it isnt given '' it will display "value" so using '' to hide it
},
gridLineWidth: 1,
type: 'datetime', //y-axis will be in milliseconds
dateTimeLabelFormats:
{ //force all formats to be hour:minute:second
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
},
opposite: true
}],
plotOptions:
{
series:
{
dataLabels:
{
enabled: true,
formatter: function()
{
if( this.series.index == 0 )
{
return secondsTimeSpanToHMS(this.y/1000) ;
}
else
{
return this.y;
}
}
}
}
},
series:
[{
}]
});
});
$（“#容器”）。高图({
图表：{
键入：“列”，
活动：{
加载：函数（）{
重绘列（此）
},
重画：函数（）{
重绘列（此）
}
}
},
标题：{
文本：{{user_to_show}}的工作时间
},
副标题:{
文本：{{user_to_show}}的弹性时间：'
},
工具提示：{
格式化程序：函数（）{
var text='Date:'+this.x+'
'+'时间：'+secondsTimeSpanToHMS（this.y/1000）+
“
”+“额外信息：”+{{Extra_info | safe}}}[this.x]；
返回文本；
}
},
xAxis：
{
类别：{{所有日期}安全}
},
亚克斯：
[{
标题：
{
文本：“”//如果未指定“”，它将显示“值”，因此使用“”将其隐藏
},
网格线宽度：1，
类型：'datetime'，//y轴将以毫秒为单位
日期时间标签格式：
{//强制所有格式为小时：分钟：秒
第二个：“%H:%M:%S”，
分钟：“%H:%M:%S”，
小时数：“%H:%M:%S”，
日期：“%H:%M:%S”，
周：“%H:%M:%S”，
月份：“%H:%M:%S”，
年份：'%H:%M:%S'
},
相反：对
}],
打印选项：
{
系列：
{
数据标签：
{
启用：对，
格式化程序：函数（）
{
如果（this.series.index==0）
{
返回第二次激励计划（本年度/1000）；
}
其他的
{
把这个还给我；
}
}
}
}
},
系列：
[{
}]
});
});
提前感谢您的回复。这是我对解决方案的建议。我认为评论中已经解释了一切。如果有什么不清楚的地方，尽管问
let data1 = {
Jarnvag_asdasd: ['2020-10-22'],
Fiber_Matning: ['2020-10-28', '2020-10-29'],
Fiber_Forarbete: ['2020-10-28', '2020-10-29'],
};
let data2 = {
Jarnvag_asdasd: [28800],
Fiber_Matning: [28800, 18000],
Fiber_Forarbete: [28800, 14400],
};
// The constructor to create the series structure
function CreateSeries(name, data) {
this.name = name;
this.data = data;
}
// series array
let series = [];
// Iterate through the data to concat them
for (let i in data1) {
let data = [];
data1[i].forEach((d, j) => {
data.push([d, data2[i][j]])
})
series.push(new CreateSeries(i, data))
}
Highcharts.chart('container', {
series: series
});
演示：很抱歉回复太晚，我忘记了这篇文章，因为我能找到解决问题的另一个方法，但这个方法正是我想要的。这可能比我之前找到的其他解决方案好一点。谢谢你的帮助。