0

我在 IE 7 上显示我由 Highstock 设计的图表时遇到了一些问题。

当我尝试设计图表并在 Chrome 上查看时,它没有任何问题。

这是我想看到的图表。

http://211.47.191.60/temp/Cap_origin_from_chrome

但是,当我尝试在 IE 7 上查看它时,它显示如下。

http://211.47.191.60/temp/Cap_from_IE7

这是我使用 Fiddle 设计的 javascript 源代码。

$(function () {
// Create the chart
window.chart = new Highcharts.StockChart({
    chart: {
        renderTo: 'container',
        type: 'areaspline',
        backgroundColor: '#FFFFFF',
        shadow: true
    },

    credits: {
        enabled: false
    },

    rangeSelector: {
        buttons: [{
            type: 'day',
            count: 1,
            text: '1D'
        }, {
            type: 'day',
            count: 15,
            text: '2W'
        }, {
            type: 'month',
            count: 1,
            text: '1M'
        }, {
            type: 'month',
            count: 3,
            text: '3M'
        }, {
            type: 'month',
            count: 6,
            text: '6M'
        }, {
            type: 'year',
            count: 1,
            text: '1Y'
        }, {
            type: 'all',
            text: '전체'
        }],
        inputStyle: {
            color: '#039'
        },
        labelStyle: {
            color: 'silver'
        },
        selected: 1
    },

    navigator: {
        enabled: false
    },

    xAxis: {
        //categories: ['1회차', '2회차', '3회차', '4회차', '5회차', '6회차', '7회차'], // 동적으로 늘려야 함
        showFirstLabel: false,
        showLastLabel: true,
        tickPixelInterval: 150,
        tickColor: 'green',
        tickLength: 10,
        tickWidth: 2,
        tickPosition: 'inside',
        //type: 'datetime',
        //dateTimeLabelFormats: {
        //  day: '%Y<br/>%m-%d',
        //  week: '%Y<br/>%m-%d',
        //  month: '%Y-%m',
        //  year: '%Y'
        //},
        labels: {
            rotation: -30,
            y: 10
        }
    },

    yAxis: {
        tickPixelInterval: 40,
        tickColor: 'gray',
        tickLength: 10,
        tickWidth: 2,
        tickPosition: 'inside',
        gridLineWidth: 1,
        gridLineDashStyle: 'longdash',
        minorGridLineColor: '#FFF0F0',
        minorGridLineWidth: 1,
        minorTickInterval: 'auto',
        min: 0,
        max: 100,
        plotLines: [{
            value: 90, // DB 에서 평가 기준 받아와 저장 필요
            width: 3,
            color: 'red',
            dashStyle: 'dash',
            label: {
                text: '평가기준',
                align: 'top',
                y: -4,
                x: 12
            }
        }],
        title: {
            align: 'high',
            offset: 0,
            text: '종합품질점수',
            rotation: 0,
            y: -10
        },
        labels: {
            formatter: function () {
                return this.value + ' 점';
            },
            x: -30
        }
    },

    plotOptions: {
        series: {
            marker: {
                enabled: true
            }
        }
    },

    scrollbar: {
        enabled: true,
        minWidth: 5,
        barBackgroundColor: 'gray',
        barBorderRadius: 7,
        barBorderWidth: 0,
        buttonBackgroundColor: 'gray',
        buttonBorderWidth: 0,
        buttonArrowColor: 'yellow',
        buttonBorderRadius: 7,
        rifleColor: 'yellow',
        trackBackgroundColor: 'white',
        trackBorderWidth: 1,
        trackBorderColor: 'silver',
        trackBorderRadius: 7
    },

    series: [{
        name: '종합품질점수',
        data: [{
            name: '1회차',
            color: 'red', //평가 기준 만족 시 blue, 불만족시 red
            events: {
                click: function () {
                    alert("!!!!");
                }
            },
            x: Date.UTC(2013, 0, 1),
            y: 32
        }, {
            name: '2회차',
            color: 'red', //평가 기준 만족 시 blue, 불만족시 red
            events: {
                click: function () {
                    alert("@@@@");
                }
            },
            x: Date.UTC(2013, 0, 2),
            y: 41
        }, {
            name: '3회차',
            color: 'red', //평가 기준 만족 시 blue, 불만족시 red
            events: {
                click: function () {
                    alert("####");
                }
            },
            x: Date.UTC(2013, 0, 3),
            y: 54
        }, {
            name: '4회차',
            color: 'red', //평가 기준 만족 시 blue, 불만족시 red
            events: {
                click: function () {
                    alert("$$$$");
                }
            },
            x: Date.UTC(2013, 0, 4),
            y: 67
        }, {
            name: '5회차',
            color: 'red', //평가 기준 만족 시 blue, 불만족시 red
            events: {
                click: function () {
                    alert("%%%%");
                }
            },
            x: Date.UTC(2013, 0, 5),
            y: 74
        }, {
            name: '6회차',
            color: 'blue', //평가 기준 만족 시 blue, 불만족시 red
            events: {
                click: function () {
                    alert("^^^^");
                }
            },
            x: Date.UTC(2013, 0, 6),
            y: 85
        }, {
            name: '7회차',
            color: 'blue', //평가 기준 만족 시 blue, 불만족시 red
            events: {
                click: function () {
                    alert("&&&&");
                }
            },
            x: Date.UTC(2013, 0, 7),
            y: 91
        }],

        type: 'area',
        pointStart: Date.UTC(2013, 0, 1),
        pointInterval: 24 * 3600 * 1000,
        showInLegend: true,
        threshold: null,
        tooltip: {
            valueDecimals: 2
        },
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 1,
                y2: 1
            },
            stops: [
                [0, Highcharts.getOptions().colors[0]],
                [1, 'rgba(0,0,0,0)']
            ]
        }
    }]
});

});

有一些韩国字符,请不要介意。

谁能帮我解决这个问题?

4

1 回答 1

1

据报道,它看起来像 Highcharts 中的 plotLines 错误:https ://github.com/highslide-software/highcharts.com/issues/1478

可能的解决方法是在回调中添加 plotLine,参见示例:http: //jsfiddle.net/f9aTL/12/(仍然不是完美的解决方案)

打回来:

function (chart) {
    chart.yAxis[0].addPlotLine({
        value: 90, // DB 에서 평가 기준 받아와 저장 필요
        width: 3,
        color: 'red',
        dashStyle: 'Dash',
        label: {
            text: '평가기준',
            align: 'top',
            y: -4,
            x: 12
        }
    });
});
于 2013-01-31T13:35:17.830 回答