动态地将系列添加到 highcharts

Question

我对 highcharts 比较陌生，所以我不是那么了解。 但我想要做的是我试图动态地创建具有名称和一些 x、y 值的系列。为了获得 x 和 y 值，我使用了两个字典，如下所示：

X 值。它们是日期
Y 值。他们是秒 我想要做的是创建一个系列，其中包含键的名称，然后它们可以有多个点来表示 x、y 值。

例如，在“Fiber_Mätning”，我在两个字典的键中都有两个值。我想做的是创建一个名为“Fiber_Mätning”的系列，然后它应该有两个点，我同时给出 x 和 y 值。

所以“Fiber_Mätning”中的第一个点是 x:"2020-10-28" y:"28800" “Fiber_Mätning”中的第二个点是 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:
                                [{

                                }]
                            });
                        });

（我正在使用 django、html 和 js 执行此操作） 如果有任何不清楚的地方，请说出来，我会尝试更详细地解释它。 提前感谢您的任何回复。

Answer 1

这是我的解决方案建议。我认为一切都在 cmets 中得到了解释。如果有不清楚的地方，请随时提问。

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
});

演示：https://jsfiddle.net/BlackLabel/r7ame5gw/