如何在Highstock中将json数据添加到自定义标志？

Question

使用Highstock（StockChart类型）我使用带有HTML和图像的标志创建了一个时间轴。我目前已对数据进行了硬编码，但我想通过json添加它。我已经将json文件添加到我的代码顶部并为其创建了一个变量（flagData）。如何使用json数据添加此项来替换硬编码数据？

https://jsfiddle.net/SkiWether/2cxgkmsv/

    var flagData = [{

        "productName": "Test Product A",
        "weekEndingData": [{
            "weekEnding": "11/16/2015",
            "testValue": 711,
            "flagBlocks": [{
                "blockName": "Box - 1",
                "imgUrl": "https://placeimg.com/75/50/nature"
            }]
        }, {
            "weekEnding": "11/23/2015",
            "testValue": 644,
            "flagBlocks": [{
                "blockName": "Box - 1",
                "imgUrl": "https://placeimg.com/75/50/animals"
            }]
        }, {
            "weekEnding": "11/30/2015",
            "testValue": 844,
            "flagBlocks": [{
                "blockName": "Box - 1",
                "imgUrl": "https://placeimg.com/75/50/nature"
            }, {
                "blockName": "Box - 2",
                "imgUrl": "https://placeimg.com/75/50/tech"
            }, {
                "blockName": "Box - 3",
                "imgUrl": "https://placeimg.com/75/50/animals"
            }]
        }, {
            "weekEnding": "12/07/2015",
            "testValue": 340,
            "flagBlocks": [{
                "blockName": "Box - 1",
                "imgUrl": "https://placeimg.com/75/50/tech"
            }, {
                "blockName": "Box - 2",
                "imgUrl": "https://placeimg.com/75/50/animals"
            }]
        }]
    }]

Answer 1

为标志定义空数组，然后正确格式化数据，例如：

var flagSeries = []; // placeholder

$.each(flagData[0].weekEndingData, function(i, flag) {
  var week = flag.weekEnding.split('/'),
      x = Date.UTC(week[2], parseInt(week[1]) - 1, week[0]);

  $.each(flag.flagBlocks, function(j, block) {
    flagSeries.push({
      x: x,
      title: '<div class="flagContainer"><div class="innerText">' + block.blockName + '</div><span class="innerImage"><img src="' + block.imgUrl + '" width="75" height="52"></span></div>'
    });
  });
});

并演示：https://jsfiddle.net/2cxgkmsv/7/（不是我禁用了最小+最大值，仅为展示选择）。