HI请找到下面的小提琴，当这些点具有相同的值时，highcharts不会画线。这是一个错误还是我错过了什么？我们怎么解决这个问题？
我修改了下面提到的代码并调用了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;
},
答案 0 :(得分：2)
对于具有零值的折线图或具有相同值的相邻数据点，实现渐变的唯一方法是将渐变应用于标记本身而不是实际线。
似乎这是一个已知的Highcharts问题，可以看作here，但我可以在here中查看markers工作以下片段：
$(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>