2016-11-10 179 views
1

我使用chart.js之1.0.2創建一個折線圖: The chart I'm getting right now如何對齊chart.js之線圖表標籤,以中心

我試圖做的是移動是標籤在圖表的每個矩形的中心(而不是與垂直網格線對準)的底部:

What I'm trying to get to

沒有關於此上chartjs.org文檔,但相信隨着智能特技此問題可以很容易地解決。關於如何實現這一點的任何想法?

回答

0

ChartJS Documentation,「電網線路配置」下存在drawOnChartArea選項:

名稱:drawOnChartArea
類型:布爾
描述:如果爲真,則繪製軸線內的圖表區線。當有多個軸,你需要控制哪些網格線繪製

{ 
    type: 'line', 
    data: data, 
    options: { 
     ... 
     scales: { 
      xAxes: [{ 
       gridLines: { 
        drawOnChartArea: true 
       } 
      ]} 
     } 
    } 
} 
+1

給你的答案增加一個小小的解釋來描述它的工作原理。 – Morgoth

+0

這是社區 –

+0

雖然此代碼片段可能會解決問題,但[包括解釋](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers)確實有助於改進您的帖子的質量。請記住,您將來會爲讀者回答問題,而這些人可能不知道您的代碼建議的原因。 – DimaSan

1

offsetGridLines(布爾) 如果爲真,這非常有用,標籤偏移以網格線之間。

type: 'line', 
data: data, 
options: { 
    ... 
    scales: { 
     xAxes: [{ 
      gridLines: { 
       offsetGridLines: true 
      } 
     ]} 
    } 
} 
+1

你給出了和Pasqual一樣的答案。此解決方案適用於Chart.js 2.0,而我正在使用Chart.js 1. – DMEM

+0

我沒有更改代碼中的param對不起......現在它已被編輯。我使用offsetGridLines而不是drawOnChartArea。它現在工作嗎? – user4842787

+0

我仍然不認爲這是Chart.js 1.x語法。當前語法是:'new Chart(document.getElementById(「line」)。getContext(「2d」))。Line(lineChartData,{ } responder:true, animation:true, pointDot:true, pointDotRadius :5, 貝茲曲線:真, pointHitDetectionRadius:60, datasetStroke:真, datasetStrokeWidth:4, datasetFill:真, barDatasetSpacing:1, scaleOverride:真, drawOnChartArea:真, scaleSteps:4, scaleStartValue :0 });' – DMEM