Question

我想在线图上创建一个上下文菜单。当用户在一个点上盘旋时，他们可以右键单击并看到一个上下文菜单，以便他们可以触发更多操作。

这可以用chart.js吗？

谢谢，德里克

Answer 1

AFAIK没有来自Chart.js的上下文菜单的本机支持，但您可以使用HTML创建它并处理它。

这是一个例子：

＆＃13;

var timestamp = [],
    speed = [10, 100, 20, 30, 40, 100, 40, 60];
for (var k = speed.length; k--; k>0) {
	timestamp.push(new Date().getTime()-60*60*1000*k);
}

var canvas = document.getElementById('chart');
var BB = canvas.getBoundingClientRect(),
  offsetX = BB.left,
  offsetY = BB.top; 
var ctx = canvas.getContext("2d");
var data = {
  labels: timestamp,
  datasets: [{
      data: speed,
      label: "speed",
      backgroundColor: ['rgba(0, 9, 132, 0.2)'],
      borderColor: ['rgba(0, 0, 192, 1)'],
      borderWidth: 1,
    }
  ]
};
var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
      }
    }],
    xAxes: [{
      type: 'time',
    }]
  }
};

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

var $menu = $('#contextMenu');
canvas.addEventListener('contextmenu', handleContextMenu, false);
canvas.addEventListener('mousedown', handleMouseDown, false);

function handleContextMenu(e){
  e.preventDefault();
  e.stopPropagation();
  var x = parseInt(e.clientX-offsetX);
  var y = parseInt(e.clientY-offsetY);
  $menu.css({left:x,top:y});
  $menu.show();
  return(false);
}

function handleMouseDown(e){
  $menu.hide();
}

menu = function(n){
  console.log("select menu "+n);
  $menu.hide();
}

＆＃13;

#chart {
  width: 100%;
  height: 100%;
}
#contextMenu{
  position:absolute;
  border:1px solid red;
  background:white;
  list-style:none;
  padding:3px;
}
.menu-item:hover {
  background: #dddddd;
  text-decoration: underline;
  cursor: pointer;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id=canvasContainer>
  <canvas id="chart"></canvas>
  <ul id="contextMenu" style="display:none;">
    <li class="menu-item" onclick="menu(1)">Menu 1</li>
    <li class="menu-item" onclick="menu(2)">Menu 2</li>
  </ul>
</div>

＆＃13;

Answer 2

对于任何寻求此结果的人，@ beaver的答案无权访问单击的项目（数据点），您可以将状态保存在onHover中，并在contextmenu中使用。

    options: {
        events: ['click', 'mousemove'],
        onHover: function(e, fields){
            const lx = e.layerX;
            const bars = fields.filter(({_view: {x,width}}) => (x - width/2) <= lx && lx <= (x + width/2));
            const data = bars.map(({_index, _datasetIndex}) => this.data.datasets[_datasetIndex].data[_index]);
            this.hoveredItem = {bars, data, fields};
        },
    },
    plugins: [
        {
            afterInit: (chart) =>
            {
                var menu = document.getElementById("contextMenu");
                chart.canvas.addEventListener('contextmenu', handleContextMenu, false);
                chart.canvas.addEventListener('mousedown', handleMouseDown, false);

                function handleContextMenu(e){
                    e.preventDefault();
                    e.stopPropagation();
                    menu.style.left = e.clientX + "px";
                    menu.style.top = e.clientY + "px";
                    menu.style.display = "block";
                    console.log(chart.hoveredItem);
                    return(false);
                }

                function handleMouseDown(e){
                    menu.style.display = "none";
                }
            }
        }
    ],

https://codepen.io/elizzk/pen/xxZjQvJ

是否可以使用chart.js创建上下文菜单？

2 个答案: