Question

...但是它当然可以在所有其他浏览器中完美显示，当然只有IE很重要。

我知道这种类型的问题已经被问过多次了，但是我已经前后遍历了这段代码定义，因此看不到哪里可能有任何错误。这些是传递给我的highcharts图表对象的选项。我看不到任何不应该出现的逗号或数据。在这里的任何帮助将不胜感激-谢谢！

title: {
      text: ''
    },
    tooltip: {
                pointFormat: '<span style="color:{point.color}">\u25CF</span> {point.x:%B %Y}: <b>{point.y}</b><br/>'
    },
    subtitle: {
      text: ''
    },
    xAxis: {
                type: 'datetime',
                title: {
        enabled: true
      },
      labels: {
                    format: '{value:%b %Y}'
                },
      tickLength: 0
    },
    yAxis: {
      title: {
        text: 'Risk Score',
        margin: 50
      },
      max: 25,
      min: 0
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      itemWidth: 150,
      itemMarginBottom: 5,
      margin: 15,
      itemStyle: {
                    color: '#337ab7'
      }
    },
    plotOptions: {
      series: {
                    lineWidth: 0,
                    events: {
                        legendItemClick: function (event) {
                            _this.send('chartElementClick', event.target.userOptions.id, event.target.userOptions.name);
                        }
                    },
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
              _this.send('chartElementClick', this.options.id, this.options.name);
            }
          }
        },
        marker: {
            enabled: false
        }
      }
    }

编辑：plotOptions中的lineWidth为0，因为我手动将其设置为每个系列中不同行的不同值，所以这不是问题，因为我说过这些行在其他行中看起来还不错浏览器。感谢您的澄清@ppotaczek

编辑2：这是其中一个数据集的示例。它们都与此类似。这是从Chrome开发者工具中复制粘贴的：

data: Array(13)
0: {x: 1531800000000, y: null, id: 1, name: "Super New Risk Guy"}
1: {x: 1534478400000, y: null, id: 1, name: "Super New Risk Guy"}
2: {x: 1537156800000, y: null, id: 1, name: "Super New Risk Guy"}
3: {x: 1539748800000, y: null, id: 1, name: "Super New Risk Guy"}
4: {x: 1542430800000, y: 1, id: 1, name: "Super New Risk Guy"}
5: {x: 1545022800000, y: 8, id: 1, name: "Super New Risk Guy"}
6: {x: 1547701200000, y: 8, id: 1, name: "Super New Risk Guy"}
7: {x: 1550379600000, y: 4, id: 1, name: "Super New Risk Guy"}
8: {x: 1552795200000, y: 13, id: 1, name: "Super New Risk Guy"}
9: {x: 1555473600000, y: 14, id: 1, name: "Super New Risk Guy"}
10: {x: 1558065600000, y: 8, id: 1, name: "Super New Risk Guy"}
11: {x: 1560744000000, y: 8, id: 1, name: "Super New Risk Guy"}
12: {x: 1563336000000, y: 8, id: 1, name: "Super New Risk Guy"}
length: 13
__proto__: Array(0)
id: 1
lineWidth: 3
marker: {fillColor: "#FF9D9D"}
name: "Super New Risk Guy"

编辑3：加载页面时，IE版本的开发工具也完全没有控制台错误。

编辑4：这是我用来生成数据集的代码。没什么神奇的：

let dataArray = A();

    let startMonth = this.get('model.queryParams.from_selected_month');
    let trendMonthData = this.get('model.reportData.trend_data');
    let categoryThresholds = this.get('model.reportData.category_thresholds');

    //set charting data
    if (trendMonthData && trendMonthData.length > 0) {
            trendMonthData.forEach((trendMonthDataList, monthIndex) => {
                trendMonthDataList.forEach((trendDataObj) => {
                    let currentTrendObj = dataArray.find((trendObj) => { return parseInt(trendObj.id) == parseInt(trendDataObj.id); });

                    if (currentTrendObj !== undefined) {
                        currentTrendObj.data.push({ x: addMonths(startMonth, monthIndex).getTime(), y: trendDataObj.score, id: trendDataObj.id, name: trendDataObj.name });
                    } else {
                        dataArray.pushObject({ id: trendDataObj.id, name: trendDataObj.name, lineWidth: 3,
                                                                    data: [{ x: addMonths(startMonth, monthIndex).getTime(), y: trendDataObj.score, id: trendDataObj.id, name: trendDataObj.name }], marker: { fillColor: '#FF9D9D' }});
                    }
                });
      });

            if (Object.keys(this.get('model.reportData.category_thresholds')).length !== 0) {
                let upperThresholdLineData = { name: 'Upper Threshold', data: [], showInLegend: false };
                let lowerThresholdLineData = { name: 'Lower Threshold', data: [], showInLegend: false };
                upperThresholdLineData.data.push([addMonths(startMonth, 0).getTime(), categoryThresholds.upper_threshold]);
                upperThresholdLineData.data.push([addMonths(startMonth, (trendMonthData.length - 1)).getTime(), categoryThresholds.upper_threshold]);
                lowerThresholdLineData.data.push([addMonths(startMonth, 0).getTime(), categoryThresholds.lower_threshold]);
                lowerThresholdLineData.data.push([addMonths(startMonth, (trendMonthData.length - 1)).getTime(), categoryThresholds.lower_threshold]);
                dataArray.pushObject(upperThresholdLineData);
                dataArray.pushObject(lowerThresholdLineData);

                let thresholdRange = { name: 'Threshold Range',
                                                            type: 'arearange', 
                                                            color: '#C7F3D4',
                                                            zIndex: -999,
                                                            data: [[addMonths(startMonth, 0).getTime(), categoryThresholds.lower_threshold, categoryThresholds.upper_threshold], 
                                                                        [addMonths(startMonth, (trendMonthData.length - 1)).getTime(), categoryThresholds.lower_threshold, categoryThresholds.upper_threshold]], 
                                                            showInLegend: false };

                dataArray.pushObject(thresholdRange);
            }
    }

然后我只是用highcharts助手来渲染它：

{{high-charts chartOptions=chartOptions content=chartData}}

Answer 1

如果有人感兴趣：

正是我创建的这个自定义函数：addMonths(startMonth, monthIndex)导致了所有问题。我完全没有来自IE的输出，我知道这是发生了，它花了很多肘油脂才能弄清楚。相反，我只是安装了moment.js，并使用此函数来增加月份，并以毫秒为单位显示highcharts将遵守的值：

moment(startMonth, "YYYY-MM-DD").add(monthIndex, 'months').valueOf()

请注意，需要指定带有日期格式的额外参数，或者再次使用该参数，在除IE之外的所有浏览器中都可以使用。

Highcharts折线图不会在IE中显示折线图

1 个答案: