【问题标题】:Chart.js add tooltip at intersection of axes (break even)Chart.js 在轴的交点处添加工具提示(收支平衡)
【发布时间】:2017-04-30 12:16:12
【问题描述】:

我有一个简单的 Chart.js 折线图,它显示了两个决策的成本。我现在想展示一个相对于另一个的盈亏平衡,这基本上是交叉点。

我举了一个例子来说明我到目前为止here

var ctx = document.getElementById("chart");
var options = {
    type: 'line',
    data: {
        labels: ["1", "2", "4", "6", "7", "10"],
        datasets: [
            {
                backgroundColor: "rgba(151,187,205,0.2)",
                borderColor: "rgba(151,187,205,1)",
                data: [80, 80, 80, 80, 80, 80]
            },
            {
                backgroundColor: "rgba(220,220,220,0.2)",
                borderColor: "rgba(220,220,220,1)",
                data: [8.84, 17.68, 35.36, 53.04, 70.72, 88.4]
            }
        ]
    },
    options: {
        tooltips: {
            enabled: false
        },
        legend: {
            position: 'top'
        }            
    }
};
var myChart = new Chart(ctx, options);

我该怎么做

  1. 在截取两行时显示工具提示
  2. 显示截取值(在工具提示内或轴上)
  3. 在图表内移动图例

任何帮助将不胜感激。谢谢。

【问题讨论】:

标签: javascript jquery charts chart.js


【解决方案1】:

这对于问题非常具体

 Chart.plugins.register({
afterInit: function(chart) {
var intersect = getIntersection();
 var datasets = chart.data.datasets;
 var labels = chart.data.labels;
 labels.push(intersect.x)
    labels.sort(function(a,b){return a - b});
y = labels.indexOf(intersect.x);
chart.data.datasets.forEach(function(ds,i){ds.data.splice(y, 0, intersect.y)});

 }
 })
 function getIntersection(){
  var y2=17.68, y1=8.84,x2=2,x1=1,x3 = x1, x4 = x2,
      y4=80,y3=80;
  var x=((x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
var y=((x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
    x = Math.round(x*100)/100;
y = Math.round(y*100)/100;
return {x:x,y:y}  ;

http://jsfiddle.net/o3cyhxrn/4/

【讨论】:

  • 谢谢你的想法不是我想要的,因为我的价值观是动态的,但谢谢你的想法。
  • 您可以将 x1,x2,y1,y2,y3,y4 的值传递给动态列表中的函数
猜你喜欢
  • 1970-01-01
  • 2017-12-11
  • 1970-01-01
  • 1970-01-01
  • 2023-03-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多