陰影從0開始但不是刻度

我在使圖表正確縮放和陰影時遇到了一些麻煩。陰影從0開始但不是刻度

我想陰影從0開始。換句話說，對於正值，它應該只遮蔽X軸以上;對於僅在X軸下方的負值。

但是我想比例是相對於實際值。

如果我將scaleBeginAtZero設置爲false（默認），那麼這就是圖表的樣子。請注意，它從底部開始着色，-10，所以這是誤導性的，看起來所有的值都是正值。

如果我設置scaleBeginAtZero爲真，那麼它正確地遮擋正面和負面的，但最低值是0和小於0的任何被切斷（和工具提示不顯示）

這就是我試圖實現的（大致從第一張圖表上拍攝下來的）。比例與第一個圖表相同，但陰影始於0軸。

來源

2015-10-13 andrewtweber

您可以掛接到第一點的draw功能（因爲你基本上是封閉的線路做填充繪製的路徑），使用Y = 0點，收這樣做就像這樣。

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function (data) { 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 

     var scale = this.scale; 
     var firstDataset = this.datasets[0]; 
     var firstPoint = firstDataset.points[0]; 
     var min = (scale.min > 0 ? scale.min : (scale.max > 0 ? 0 : scale.max)); 

     originalDraw = firstPoint.draw; 
     firstPoint.draw = function() { 
      ctx.lineTo(firstDataset.points[firstDataset.points.length - 1].x, scale.calculateY(min)); 
      ctx.lineTo(firstDataset.points[0].x, scale.calculateY(min)); 
      ctx.fillStyle = firstDataset.fillColor; 
      ctx.closePath(); 
      ctx.fill(); 

      return originalDraw.apply(this, arguments); 
     } 
    } 
});

，你也有關閉datasetFill選項（因爲我們對我們自己做這件事）

var myChart = new Chart(ctx).LineAlt(data, { 
    datasetFill: false 
});

如果你也想移動x軸標籤，最乾淨的方式做這將是關閉當前標籤，只是使用xLabels收集繪製自己的

小提琴 - http://jsfiddle.net/dnpo61tu/

來源

2015-10-14 11:46:39 potatopeelings

哇，謝謝！出於某種原因，它只會爲我畫一條灰線，直到我在一個工具提示上徘徊，然後它會用我選擇的正確藍色陰影重繪圖表。 'myChart.update（）;'在啓動圖表之後修復了圖表 – andrewtweber

啊，您可能將動畫設置爲false。 – potatopeelings

啊，是的，我這樣做。再次感謝 – andrewtweber

陰影從0開始但不是刻度

回答

相關問題