1
これについて多くの検索が行われましたが、chart.jsに基づいてこれに関する回答は得られませんでした。私はすでにhighchart.jsを使用していたこの質問hereに尋ねていましたが、解決策を得ましたが、今はchart.jsライブラリを使用して解決策を見つけようとしています。 以下は私が試したコードです。私はこれらの2つの折れ線グラフの交点を見つける必要があります。グラフイメージを参照してください。任意のアイデアを持っ 
Chart.jsの折れ線グラフの交点ですか？
var config = {
type: 'bar',
data: {
labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
datasets: [{
type: 'line',
label: 'Cost',
data: [150, 15, 25, 14, 10, 7],
borderColor: '#E35500',
fill: false,
lineTension: 0,
borderJoinStyle: 'miter',
}, {
type: 'line',
label: 'Cash Flow',
data: [20, 180, 170, 220, 160, 190],
borderColor: '#FFC000',
fill: false,
lineTension: 0,
borderJoinStyle: 'miter',
xAxes: [{
barPercentage: 0.4
}]
},
{
type: 'line',
label: 'Accumulative Flow',
data: [0, -10, 20, 30, 40, 50],
borderColor: 'red',
fill: false,
lineTension: 0,
borderJoinStyle: 'miter',
xAxes: [{
barPercentage: 0.4
}]
}, {
type: 'bar',
label: 'Benifit(One time)',
backgroundColor: "#005998",
data: [40, 50, 60, 80, 50, 60],
}, {
type: 'bar',
label: 'Benifit(Recurring)',
backgroundColor: "#0FAAFF",
data: [120, 150, 150, 180, 120, 140],
}
]
},
options: {
title: {
display: true,
text: 'Custom Chart Title'
},
scales: {
xAxes: [{
time: {
displayFormats: {
quarter: ' YYYY'
}
},
stacked: true,
beginAtZero: true,
barPercentage: 0.3,
id: 'x-axis-label',
position: 'bottom',
scaleStartValue: 20,
gridLines: {
display: false
},
}],
yAxes: [{
stacked: true,
id: 'y-axis-label',
ticks: {
max: 300,
min: -50,
stepSize: 50,
},
position: 'left',
gridLines: {
display: false
},
}]
},
legend: {
position: 'right'
},
maintainAspectRatio: false,
scaleBeginAtZero: true
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);.GraphContain {
max-height: 500px;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="GraphContain">
<canvas id="myChart" width="400" height="400"></canvas>
</div>誰でも？これに天才が必要!!!
これについて何か考えている人はいますか？ –
これを行う簡単な方法はありません。すべてが数学に依存しています。それにアプローチする方法の詳細な概要については、この[質問]（http://stackoverflow.com/questions/28845817/chart-js-find-intersection-point-and-draw-a-circle）を参照してください。ベジェ曲線を使用していないので、はるかに簡単です。ここでは、[jsfiddle]（http://jsfiddle.net/justin_c_rounds/Gd2S2/light/）に2行の交差を見つける数学が含まれています。がんばろう！ – jordanwillis
私はこれを試しましたが、それは私のために働いています@jordanwillis –