Highcharts折线图奇怪的问题

Question

HI 请找到下面的 fiddle 当点具有相同值时高图不画线。这是一个错误还是我错过了一些东西？我们如何解决这个问题？

我已经修改了下面提到的代码并调用了 applyGradient 但我仍然没有看到该行。我不确定这段代码有什么问题。

lineChartOptions: function (displayFormat) {
                    var self = this;
                    var data = this.getSeriesData(false);
                    var xCategories = _.range(1, data.length + 1);
                    var title = $('#coid_title').text();
                    var defaultColor = ['#0f477a'];
                    var dataSum = 0;
                    var yData = _.pluck(data, 'y');
                    for (var i = 0, len = yData.length; i < len; i++) {
                        dataSum += yData[i];
                    }

//                  Highcharts.getOptions().colors = Highcharts.map(defaultColor, function (color) {
//                      return {
//                          radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
//                          stops: [
//                      [0, color],
//                      [1, Highcharts.Color(color).brighten(0.0).get('rgb')] // darken
//                  ]
//                      };
//                  });

                    var applyGradient = function (color) {
                        return {
                            radialGradient: {
                                cx: 0.5,
                                cy: 0.3,
                                r: 0.7
                            },
                            stops: [
                                [0, color],
                                [1, Highcharts.Color(color).brighten(0.0).get('rgb')]
                            ]
                        };
                    };

                    var options = {

                        chart: {
                            renderTo: 'coid_graphicalChart',
                            type: 'line',
                            reflow : false,
                            style: {
                                fontFamily: ""
                            },
                            events: {
                                load: function (e) {
                                    var series = this.series[0];
                                    var pointData = series.data;
                                    var chart = series.chart;
                                    var legendTitle = self.currentGraphData;
                                    var $legend = $('.highcharts-legend');
                                    $legend.empty();

                                    var renderer = chart.renderer;
                                    var chartHeight = chart.chartHeight;
                                    var maxWidth = 324, wrappedHeight = 13, inc = 20,
                                    yt = 25,
                                    ixl = 5, yl = 50,
                                    cxl = ixl + 349, nxl = ixl + 25,
                                    ixr = 400, yr = yl,
                                    cxr = ixr + 354, nxr = ixr + 30;

                                    var leftColumnCnt = Cobalt.Search.Util.parseInt((pointData.length / 2) + (pointData.length % 2));

                                    var legendgroup = renderer.g().add();

                                    renderer.text(self.templates.lineChartLegend({ legendTitle: legendTitle }), ixl, yt).add(legendgroup);

                                    for (var i = 0; i < leftColumnCnt; i++) {
                                        var cnt = 0;
                                        renderer.text((i + 1) + ".", ixl, yl).add(legendgroup);
                                        var wrapped = self.drawText(legendgroup.element, pointData[i].name, nxl, yl, wrappedHeight, inc, maxWidth);

                                        if (self.displayFormat === self.constants.percentage) {
                                            cnt = renderer.text(Highcharts.numberFormat((pointData[i].y / series.options.dataSum) * 100) + '%', cxl, yl);

                                        } else {
                                            cnt = renderer.text(pointData[i].y, cxl, yl);
                                        }

                                        cnt.element.setAttribute('text-anchor', 'end');
                                        cnt.add(legendgroup);

                                        if (wrapped) {
                                            yl += inc + 27;
                                        } else {
                                            yl += inc;
                                        }
                                    }

                                    for (var i = leftColumnCnt, pointDataLength = pointData.length; i < pointDataLength; i++) {
                                        var cnt = 0;
                                        renderer.text((i + 1) + ".", ixr, yr).add(legendgroup);
                                        var wrapped = self.drawText(legendgroup.element, pointData[i].name, nxr, yr, wrappedHeight, inc, maxWidth);

                                        if (self.displayFormat === self.constants.percentage) {
                                            cnt = renderer.text(Highcharts.numberFormat((pointData[i].y / series.options.dataSum) * 100) + '%', cxr, yr);
                                        } else {
                                            cnt = renderer.text(pointData[i].y, cxr, yr);
                                        }

                                        cnt.element.setAttribute('text-anchor', 'end');
                                        cnt.add(legendgroup);

                                        if (wrapped) {
                                            yr += inc + 27;
                                        } else {
                                            yr += inc;
                                        }

                                    }

                                    $('g.highcharts-legend').append(legendgroup.element);
                                    $('.highcharts-background').attr('height', chartHeight + yl);
                                    chart.container.firstChild.setAttribute('height', chartHeight + yl);
                                    chart.container.style.height = chart.container.firstChild.style.height = chartHeight + yl + 'px';
                                    chart.container.parentElement.style.height = chartHeight + yl + 'px';
                                    self.hideChartTitle();
                                },
                                redraw: function (e) {
                                    this.series[0].chart = self.reCreateChart();
                                }
                            }
                        },

                        title: {
                            text: title
                        },

                        exporting: {
                            enabled: false
                        },

                        xAxis: {
                            categories: xCategories,
                            labels: {
                                style: {
                                    fontSize: '100%',
                                    color: '#000000'
                                }
                            }
                        },

                        yAxis: {
                            min: 0,
                            title: {
                                enabled: false
                            },
                            labels: {
                                style: {
                                    fontSize: '100%',
                                    color: '#000000'
                                }
                            }
                        },

                        legend: {
                            enabled: true,
                            align: 'middle',
                            verticalAlign: 'bottom',
                            layout: 'vertical'
                        },

                        plotOptions: {
                            line: {
                                events: {
                                    legendItemClick: function () {
                                        return false;
                                    }
                                },
                                lineWidth: 4,
                                marker: {
                                    radius: 8
                                }
                            }
                        },

                        credits: {
                            enabled: false
                        },

                        tooltip: {
                            useHTML: true,
                            enabled: true,
                            backgroundColor: '#fcfbdf',
                            borderColor: '#feda73'
                        },

                        series: [{
                            dataSum: dataSum,
                            animation: false,
                            data: data,
                            marker: {
                                fillColor: applyGradient(defaultColor)
                            }
                        }]

                    };

                    if (displayFormat === this.constants.percentage) {
                        options.tooltip.formatter = function () {
                            return self.templates.tooltip(self.tooltipFormatter(this.series.options.dataSum, this.key, this.y, displayFormat));
                        };
                    } else {
                        options.tooltip.formatter = function () {
                            return self.templates.tooltip(self.tooltipFormatter(this.series.options.dataSum, this.key, this.y, displayFormat));
                        };
                    }

                    return options;
                },

Answer 1

似乎对于零值或具有相同值的相邻数据点的折线图，实现渐变的唯一方法是将渐变应用于标记本身而不是实际线条。

这似乎是一个 was/is 已知的 Highcharts 问题 here, but the markers work around which I pulled from here 可以在下面的代码片段中查看：

$(function () {
    var colors = ['#4572A7',
        '#AA4643',
        '#89A54E',
        '#80699B',
        '#3D96AE',
        '#DB843D',
        '#92A8CD',
        '#A47D7C',
        '#B5CA92'];
    var applyGradient = function (color) {
        return {
            radialGradient: {
                cx: 0.5,
                cy: 0.3,
                r: 0.7
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
            ]
        };
    };

    // works if you comment this out.
    //colors = $.map(colors, applyGradient);

    $('#container').highcharts({
        colors: colors,
        title: {
            text: 'Points with zero value are not connected by line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            offset: 0,
        },
        plotOptions: {
            series: {
                connectNulls: true
            }
        },
        yAxis: {
            min: 0,
        },
        series: [{
            data: [2, 10, 40, 40, 40, 40, 40, 40, 40, 40, 30, 20],
            marker: {
                fillColor: applyGradient(colors[0])
            }
        }, {
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            marker: {
                fillColor: applyGradient(colors[1])
            }
        }, ]

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 300px"></div>

Highcharts折线图奇怪的问题

Highcharts line chart strange issue

highcharts