BillboardJS 中关于散焦的标记

如何解决BillboardJS 中关于散焦的标记

将鼠标悬停在 billboardjs 中的一条线上时，您可以看到一个跟随鼠标的标记（一条高垂直线）。 是否有在 x 线上放置标记的功能，该功能可以在不通过 onmousemove/悬停在数据点上触发自动标记的情况下使用？

var chart = bb.generate({
  data: {
    columns: [
    ["data1",30,200,100,400,150,250],["data2",50,20,10,40,15,25]
    ],type: "line",// for ESM specify as: line()
  },bindto: "#lineChart"
});

https://naver.github.io/billboard.js/demo/#Chart.LineChart

举个例子。我在图表中使用了一个 onclick（在数据对象中），它使视图散焦，但我仍然希望标记保留。 所以代码看起来像：

var chart = bb.generate({
  data: {
    columns: [
    ["data1",// for ESM specify as: line()
    onclick: function (d) {
        focusElsewhere()
        showMarker(d.x)
    }
  },bindto: "#lineChart"
});

所以问题是是否有一个函数，或者一个明显的修复？

我已经浏览了 https://naver.github.io/billboard.js/release/latest/doc/Chart.html，但我当然可能漏掉了一些东西。

解决方法

我发现使用 xgrids 可以解决问题。我不认为文档给出了如何使用它的好例子。但基本上你可以使用“值”字段来给出线应该在哪个点上，并添加一个类来显示不同种类的线。

var chart = bb.generate({
  data: {
    columns: [
    ["data1",30,200,100,400,150,250],["data2",50,20,10,40,15,25]
    ],type: "line",// for ESM specify as: line()
    onclick: function (d) {
        focusElsewhere()
        this.xgrids.add({ value: d.x,class: "hover-line" }); //showMarker(d.x)
    }
  },bindto: "#lineChart"
});

要移除线路或重置广告牌以继续使用，可以这样说，您可以使用 xgrids․remove({}) 并添加一个对象，其中包含要删除的行的一些参数。