添加趨勢線與現有圖表chart.js之

從小時裏，我一直在尋找一個解決方案，趨勢線添加到具有chart.js之添加趨勢線與現有圖表chart.js之

建我想我們只能在chart.js之添加數趨勢線現有圖表？

我不想從頭開始畫一條趨勢線，而是根據這兩條線的現有數據添加兩條趨勢線;請參閱此琴例如：

THANK YOUhttps://jsfiddle.net/blueagency/p88mx3nw/

非常感謝你提前爲您的幫助。

來源

2017-04-04 Blue Agency

目前，chart.js根本沒有趨勢線能力（甚至不是對數）。也許你對Common Scale Configuration部分末尾的自定義刻度格式示例感到困惑？

你可以使用，無論在chartjs-plugin-annotation插件繪製在圖表上的趨勢線，但請記住，你會實現你自己的邏輯來計算該行的正確位置（，然後只用註釋插件實際畫出來）。

下面是演示如何使用插件的示例（該插件提供了一組annotation屬性，您可以將其添加到圖表options。然後，您只需創建一個函數來計算趨勢線並將結果用於設置註釋value和endValue性能。

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1], 
    datasets: [{ 
     label: 'Dataset 1', 
     borderColor: window.chartColors.blue, 
     borderWidth: 2, 
     fill: false, 
     data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200] 
    }] 
    }, 
    options: { 
    responsive: true, 
    title: { 
     display: true, 
     text: 'Chart.js Drsw Line on Chart' 
    }, 
    tooltips: { 
     mode: 'index', 
     intersect: true 
    }, 
    annotation: { 
     annotations: [{ 
     type: 'line', 
     mode: 'horizontal', 
     scaleID: 'y-axis-0', 
     value: 2225, 
     endValue: 0, 
     borderColor: 'rgb(75, 192, 192)', 
     borderWidth: 4, 
     label: { 
      enabled: true, 
      content: 'Trendline', 
      yAdjust: -16, 
     } 
     }] 
    } 
    } 
});

您可以在此codepen看到它的行動。

來源

2017-04-04 19:19:36 jordanwillis

是的，你說得對，我想我可以用一個數趨勢線的chart.js之正式文件，這太快了從我身邊走開。感謝您的幫助，並建議關於這個chartjs-annotation插件。但是，只能指定2個值，因此趨勢線只能是「二元」：向上或向下，表示正向或負向趨勢。例如，對於數據而言，情況會稍微複雜一些，例如，顯示的結果會增加，然後會下降一些，然後再次上升。 –

我明白。您也可以創建另一個代表趨勢線的數據集。就像在我的例子中，你將不得不自己計算趨勢線，然後沿着這條線選擇幾個點，然後像圖中任何其他線一樣在圖上繪製。 – jordanwillis

這是我以前試過的。但是，視覺渲染根本不令人愉快，乾脆。我認爲趨勢線是絕對必要的功能，應該成爲圖表庫的一部分。 –

添加趨勢線與現有圖表chart.js之

回答

相關問題