Highcharts線條圖奇怪的問題

Question

您好，請找到下面的提琴高點不畫線當點有相同的值。這是一個錯誤還是我錯過了somethihg？我們如何解決這個問題？

jsfiddle

我已經修改了代碼如下下面提到並調用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

似乎對，你必須爲零值或相鄰的數據點具有相同值，實現了梯度的唯一途徑線圖是通過應用梯度標記自己，而不是實際的線。

看來，這是/是一個已知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="http://code.highcharts.com/stock/highstock.js"></script> 
 
<div id="container" style="height: 300px"></div>