Chart.js中的线图中的交点？ [英] Intersection point in line graph in Chart.js?
本文介绍了Chart.js中的线图中的交点？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
搜索了很多关于这个的信息，但是根据chart.js没有得到任何答案。我已经问过这个问题：
var config = {type：'bar'，data：{labels：[Year 0，Year 1，Year 2，Year 3，4年级，5年级，6年级]，数据集：[{type：'line'，label：'Cost'，数据：[150,15,25,14,10,7] ，borderColor：'＃E35500'，填充：false，lineTension：0，borderJoinStyle：'miter'，}，{type：'line'，label：'Cash Flow'，数据：[20,180,170,220,160 ，190]，borderColor：'＃FFC000'，填充：false，lineTension：0，borderJoinStyle：'miter'，x Axes：[{barPercentage：0.4}]}，{type：'line'，label：'Accumulative Flow'，数据：[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'}，scale：{xAxes：[{time：{displayFormats：{quarter：'YYYY'}} true，beginAtZero：true，barPercentage：0.3，id：'x-axis-label'，位置：'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 =myChartwidth =400height =400>< / canvas>< / div>
div>
任何有想法的人？需要一个天才！
解决方案
我们在这里）））
https://jsfiddle.net/Falseclock/5nbecn0z/
如果需要显示与X轴的交点，则只需模仿Y = 0
https://jsfiddle.net/Falseclock/8g0ucdb1/
var ORDER_STATS = {2016：[10,181,194，-56,130,181,179,189,30,60,193,154]，2015：[124， -50,152,187,10,164,129，-16,115,119,129,171]，2014：[-90,80,30,59,100，-30,60,116,191， 181，-60,106]}; var colors = ['206,191,26'，'119,206,26'，'26,200,206'，'236,124,98'，'206,26,140'，'26,77,206 ']; // Definning Xvar ordersChartData = {labels：[Jan，Feb，Mar，Apr，May，Jun，Jul，Aug，Sep Oct，Nov，Dec]，数据集：[]} Object.keys（ORDER_STATS）.forEach（function（key）{color = colors.shift（）; ordersChartData.datasets.push（{label：key，lineTension：0，type：'line'，backgroundColor：rgba（+ color +，0.1），borderColor：rgba（+ color +，1），borderWidth ：2，pointBackgroundColor：rgba（+ color +，1），pointBorderColor：#fff，pointBorderWidth：1，pointRadius：4，pointHoverBackgroundColor：#fff，pointHoverBorderColor：rgba（+ color +，1 ），pointHoverBorderWidth：1，data：ORDER_STATS [key]}）;}）; var ctx = document.getElementById（myChart）。getContext（2d）; Chart.defaults.global.defaultFontColor ='gray'; Chart.defaults.global.defaultFontFamily =Tahoma; Chart.defaults.global.defaultFontSize = 11; Chart.defaults.global.defaultFontStyle ='normal'; var myChart = new Chart（ctx，{type：'line'，data ：ordersChartData，defaultFontSize：11，options：{responsive：true，title： {display：true，text：'Intersection实现'，fontColor：＃444，fontFamily：'Tahoma'，填充：0}，图例：{display：true，labels：{fontColor：'gray'，usePointStyle：true} }，tooltips：{mode：index，intersect：true，position：'nearest'，bodySpacing：4}}}）; Chart.plugins.register（{afterDatasetsDraw：function（chartInstance，easing）{var Y = chartInstance。秤[ 'y轴-0']; var X = chartInstance.scales ['x-axis-0']; zeroPointY = Y.top +（（Y.bottom - Y.top）/（Y.ticks.length -1）* Y.zeroLineIndex）; zeroPointX = Y.right; yScale =（Y.bottom - Y.top）/（Y.end - Y.start）; xScale =（X.right - X.left）/（X.ticks.length - 1）; var intersects = findIntersects（ORDER_STATS ['2015']，ORDER_STATS ['2014']）; var context = chartInstance.chart.ctx; intersects.forEach（function（result，idx）{context.fillStyle ='red'; context.beginPath（）; context.arc（（result.x * xScale）+ zeroPointX，（Y.end - Y.start） - （ result.y * yScale） - （（Y.end - Y.start） - zeroPointY），3，0，2 * Math.PI，true）; context.fill（）;}）; }}）;函数findIntersects（line1，line2）{var intersects = []; line1.forEach（function（val，idx）{var line1StartX = idx; var line1StartY = line1 [idx]; var line1EndX = idx + 1; var line1EndY = line1 [idx + 1]; var line2StartX = idx; var line2StartY = line2 [idx]; var line2EndX = idx + 1; var line2EndY = line2 [idx + 1]; result = checkLineIntersection（line1StartX，line1StartY，line1EndX，line1EndY，line2StartX，line2StartY，line2EndX，line2EndY）; if（result.onLine1& ; result.onLine2）{intersects.push（result）;}}）;返回相交;}函数checkLineIntersection（line1StartX，line1StartY，line1EndX，line1EndY，line2StartX，line2StartY，line2EndX，line2EndY）{//如果这些线相交，则结果包含交点的x和y（将线视为无限）和布尔值对于线段1或线段2是否包含点var分母a，b，numerator1，numerator2，result = {x：null，y：null，onLine1：false，onLine2：false};分母=（（line2EndY - line2StartY）*（line1EndX - line1StartX）） - （（line2EndX - line2StartX）*（line1EndY - line1StartY））; if（分母== 0）{返回结果; } a = line1StartY - line2StartY; b = line1StartX - line2StartX; numerator1 =（（line2EndX-line2StartX）* a） - （（line2EndY-line2StartY）* b）; numerator2 =（（line1EndX-line1StartX）* a） - （（line1EndY-line1StartY）* b）; a = numerator1 /分母; b = numerator2 /分母; //如果我们在这两个方向上无限地投射这些线，它们在这里相交：result.x = line1StartX +（a *（line1EndX - line1StartX））; result.y = line1StartY +（a *（line1EndY - line1StartY））; / * //值得注意的是它应该和下面的一样：x = line2StartX +（b *（line2EndX - line2StartX））; y = line2StartX +（b *（line2EndY - line2StartY））; * / //如果line1是一个段而line2是无限的，它们相交如果：if（a> 0&& a< 1）{result.onLine1 = true; } //如果line2是段并且line1是无限的，则它们相交如果：if（b> 0&& b< 1）{result.onLine2 = true; } //如果line1和line2是段，它们相交，如果以上两个都是true返回结果;};
< script src =https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js>< / script> ;< canvas id =myChartwidth =650height =241style =display：block; width：650px; height：241px;>< / canvas>
Searched a lot about this but din't got any answer on this based on chart.js. I had already asked this question here in which I was using highchart.js and got the solution but now I am using chart.js library and trying to find the solution. Below is my code I have tried. I need to find the intersection point between these 2 line graphs combo. See the Graph Image .
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>
Anyone having any idea?? need a genius on this!!!
解决方案
Here we are )))
https://jsfiddle.net/Falseclock/5nbecn0z/
If you need to show intersections with X axis, then just imitate line with Y=0 https://jsfiddle.net/Falseclock/8g0ucdb1/
var ORDER_STATS = {
"2016" : [10, 181, 194, -56, 130, 181, 179, 189, 30, 60, 193, 154],
"2015" : [124, -50, 152, 187, 10, 164, 129, -16, 115, 119, 129, 171],
"2014" : [-90, 80, 30, 59, 100, -30, 60, 116, 191, 181, -60, 106]
};
var colors = ['206,191,26','119,206,26','26,200,206','236,124,98','206,26,140','26,77,206'];
// Definning X
var ordersChartData = {
labels : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
datasets : []
}
Object.keys(ORDER_STATS).forEach(function (key) {
color = colors.shift();
ordersChartData.datasets.push(
{
label: key,
lineTension: 0,
type: 'line',
backgroundColor: "rgba("+color+",0.1)",
borderColor: "rgba("+color+",1)",
borderWidth: 2,
pointBackgroundColor : "rgba("+color+",1)",
pointBorderColor: "#fff",
pointBorderWidth: 1,
pointRadius: 4,
pointHoverBackgroundColor : "#fff",
pointHoverBorderColor: "rgba("+color+",1)",
pointHoverBorderWidth: 1,
data : ORDER_STATS[key]
}
);
});
var ctx = document.getElementById("myChart").getContext("2d");
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontFamily = "Tahoma";
Chart.defaults.global.defaultFontSize = 11;
Chart.defaults.global.defaultFontStyle = 'normal';
var myChart = new Chart(ctx, {
type: 'line',
data: ordersChartData,
defaultFontSize: 11,
options: {
responsive: true,
title: {
display: true,
text: 'Intersection realization',
fontColor: "#444",
fontFamily: 'Tahoma',
padding: 0
},
legend: {
display: true,
labels: {
fontColor: 'grey',
usePointStyle: true
}
},
tooltips: {
mode: "index",
intersect: true,
position: 'nearest',
bodySpacing: 4
}
}
});
Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
var Y = chartInstance.scales['y-axis-0'];
var X = chartInstance.scales['x-axis-0'];
zeroPointY = Y.top + ((Y.bottom - Y.top) / (Y.ticks.length -1) * Y.zeroLineIndex);
zeroPointX = Y.right;
yScale = (Y.bottom - Y.top) / (Y.end - Y.start);
xScale = (X.right - X.left) / (X.ticks.length - 1);
var intersects = findIntersects(ORDER_STATS['2015'], ORDER_STATS['2014'] );
var context = chartInstance.chart.ctx;
intersects.forEach(function (result, idx) {
context.fillStyle = 'red';
context.beginPath();
context.arc((result.x * xScale) + zeroPointX, (Y.end - Y.start) - (result.y * yScale) - ((Y.end - Y.start) - zeroPointY), 3, 0, 2 * Math.PI, true);
context.fill();
});
}
});
function findIntersects(line1, line2)
{
var intersects = [];
line1.forEach(function(val,idx) {
var line1StartX = idx;
var line1StartY = line1[idx];
var line1EndX = idx + 1;
var line1EndY = line1[idx + 1];
var line2StartX = idx;
var line2StartY = line2[idx];
var line2EndX = idx + 1;
var line2EndY = line2[idx+1];
result = checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY);
if (result.onLine1 && result.onLine2) {
intersects.push(result);
}
});
return intersects;
}
function checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) {
// if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point
var denominator, a, b, numerator1, numerator2, result = {
x: null,
y: null,
onLine1: false,
onLine2: false
};
denominator = ((line2EndY - line2StartY) * (line1EndX - line1StartX)) - ((line2EndX - line2StartX) * (line1EndY - line1StartY));
if (denominator == 0) {
return result;
}
a = line1StartY - line2StartY;
b = line1StartX - line2StartX;
numerator1 = ((line2EndX - line2StartX) * a) - ((line2EndY - line2StartY) * b);
numerator2 = ((line1EndX - line1StartX) * a) - ((line1EndY - line1StartY) * b);
a = numerator1 / denominator;
b = numerator2 / denominator;
// if we cast these lines infinitely in both directions, they intersect here:
result.x = line1StartX + (a * (line1EndX - line1StartX));
result.y = line1StartY + (a * (line1EndY - line1StartY));
/*
// it is worth noting that this should be the same as:
x = line2StartX + (b * (line2EndX - line2StartX));
y = line2StartX + (b * (line2EndY - line2StartY));
*/
// if line1 is a segment and line2 is infinite, they intersect if:
if (a > 0 && a < 1) {
result.onLine1 = true;
}
// if line2 is a segment and line1 is infinite, they intersect if:
if (b > 0 && b < 1) {
result.onLine2 = true;
}
// if line1 and line2 are segments, they intersect if both of the above are true
return result;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="myChart" width="650" height="241" style="display: block; width: 650px; height: 241px;"></canvas>
这篇关于Chart.js中的线图中的交点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
