하이 차트 챠트 차트 이상한 문제

Question

하이 포인트는 포인트가 같은 값일 때 하이 라인이 그려지는 곳을 찾지 않습니다. 이게 버그 야? 아니면 내가 잃어 버렸어? 어떻게 해결할 수 있을까요? 내가 아래에 언급하고 applyGradient 전화로 아래의 코드를 수정하지만 한

jsfiddle

아직도 내가 선을 참조니까. 나는이 코드가 무엇이 잘못되었는지 확신하지 못한다.

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

이 동일한 값으로 구배를 달성 할 수있는 유일한 방법은 0 값 또는 인접하는 데이터 포인트가 선 차트에 대한 마커 자체보다는 실제 라인 기울기를 적용 것 같다.

그것은 것이라고/here을 볼 수 있습니다로 알려진 Highcharts 문제,하지만 아래의 코드에서 볼 수 있습니다 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>

은