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

Question

使用 Highstock（股票图表类型）我创建了一个时间轴，使用带有 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/（不是我禁用了 min+max 并选择只是为了展示）。

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

How do I add json data to custom flags in Highstock?

json

highcharts

highstock