Chart.js如何显示标签的光标指针＆amp;线图中的传说

Question

我使用chart.js得到以下折线图示例。我想表明：

1. 图例和指针的指针光标悬停上的标签
2. 在线路悬停
上显示所有标签数据

 var line_chart = new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
            labels: ['May', 'June', 'July'],
            datasets: [{
                    data: [15, 25, 15],
                    label: "My Dataset1",
                    borderColor: "#00F",
                    fill: false
                }, {
                    data: [35, 15, 25],
                    label: "My Dataset2",
                    borderColor: "#F00",
                    fill: false
                }
            ]
        },
        options: {

            tooltips: {
                mode: 'label',
            },
            hover: {
                mode: 'label'
            },
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div style='width:80%'>
<canvas id="line-chart" width="800" height="450"></canvas>
</div>

Answer 1

更好的方法

不需要jQuery来选择canvas元素（line-chart）。

1▸解决方案：

在图表选项中添加以下内容：

   legend: {
      onHover: function(e) {
         e.target.style.cursor = 'pointer';
      }
   },
   hover: {
      onHover: function(e) {
         var point = this.getElementAtEvent(e);
         if (point.length) e.target.style.cursor = 'pointer';
         else e.target.style.cursor = 'default';
      }
   }

2▸解决方案：

将工具提示的 mode 设置为 dataset ：

tooltips: {
   mode: 'dataset'
}

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

var line_chart = new Chart(document.getElementById("line-chart"), {
   type: 'line',
   data: {
      labels: ['May', 'June', 'July'],
      datasets: [{
         data: [15, 25, 15],
         label: "My Dataset1",
         borderColor: "#00F",
         fill: false
      }, {
         data: [35, 15, 25],
         label: "My Dataset2",
         borderColor: "#F00",
         fill: false
      }]
   },
   options: {
      tooltips: {
         mode: 'dataset',
      },
      legend: {
         onHover: function(e) {
            e.target.style.cursor = 'pointer';
         }
      },
      hover: {
         onHover: function(e) {
            var point = this.getElementAtEvent(e);
            if (point.length) e.target.style.cursor = 'pointer';
            else e.target.style.cursor = 'default';
         }
      }
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div style='width:80%'>
   <canvas id="line-chart" width="800" height="450"></canvas>
</div>

Answer 2

使用Chart.js 2.x，我发现这种方法更加优雅。只需将其添加到选项中即可：

Private Sub button_Click()
    Dim SQLAll As String
    Dim SQL As String
    Dim Sector As String
    Sector = Me.txtSector

    If Sector = "All" Then
        Sector = " "
    End If

    SQL = "SELECT * " _
        & "FROM EveryTable " _
        & "WHERE EveryTable.Sector LIKE '*" & Sector & "*' " _
        & "AND EveryTable.Technology.Value LIKE '*" & Me.Technology & "*' " 

    Me.subformMain.Form.RecordSource = SQL
    Me.subformMain.Requery
End Sub

希望有帮助。

Answer 3

您可以使用jquery抓取图表选择器line-chart来完成此操作。

hover: {
  onHover: function(e, el) {
      $("#line-chart").css("cursor", el[0] ? "pointer" : "default");
    }
  }

jsfiddle

Answer 4

ChartJs 2提供onLeave和 legend: { display: true, onHover: function (e) { e.target.style.cursor = 'pointer' }, onLeave: function (e) { e.target.style.cursor = 'default' } } handlers。我们可以使用它们来更改光标：

UPDATE a
set a.scheme_name = case when a.product_code = b.product_code and b.agency_code=b.agency_code then b.scheme_name Else 'NA' end

from stage_table as a left join dim_lookup as b
on a.product_code = b.product_code and b.agency_code=b.agency_code