代码之家  ›  专栏  ›  技术社区  ›  tsh

当显示某些数据时,增加点半径图表.js

  •  0
  • tsh  · 技术社区  · 6 年前

    我在用 Chart.js . 我希望在默认情况下隐藏该点,但是当显示特定数据的工具提示时,通过增加其点的半径来高亮显示该数据。

    下面的代码是我尝试过的。但它只会增加点的半径,如果鼠标悬停在它上面。只要显示工具提示,半径就要增加。

    谢谢你的帮助。

    var myChart = new Chart('chart', {
      type: 'line',
      data: {
        datasets: [
          {
            label: "l1",
            borderColor: `hsla(150, 60%, 33%, 1)`,
            backgroundColor: `hsla(150, 60%, 33%, 0.8)`,
            fill: false,
            data: [{ x: 1, y: 2 }, { x: 2, y: 3 }],
          },{
            label: "l2",
            borderColor: `hsla(210, 60%, 33%, 1)`,
            backgroundColor: `hsla(210, 60%, 33%, 0.8)`,
            fill: false,
            data: [{ x: 1, y: 2 }, { x: 2, y: 1 }],
          }
        ]
      },
      options: {
        elements: {
          point: {
            radius: 1,
            hoverRadius: 4,
          },
        },
        tooltips: {
          mode: 'index',
          intersect: false,
          position: 'nearest',
        },
      }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <canvas id="chart" />
    1 回复  |  直到 6 年前
        1
  •  5
  •   IronGeek    6 年前

    mode intersect 的选项 hover 与用于 tooltips .

    ...
    hover: {
      mode: 'index',
      intersect: false
    }
    ...
    

    这条路 悬停 事件的触发方式与 工具提示 已触发。

    var myChart = new Chart('chart', {
      type: 'line',
      data: {
        datasets: [
          {
            label: "l1",
            borderColor: `hsla(150, 60%, 33%, 1)`,
            backgroundColor: `hsla(150, 60%, 33%, 0.8)`,
            fill: false,
            data: [{ x: 1, y: 2 }, { x: 2, y: 3 }],
          },{
            label: "l2",
            borderColor: `hsla(210, 60%, 33%, 1)`,
            backgroundColor: `hsla(210, 60%, 33%, 0.8)`,
            fill: false,
            data: [{ x: 1, y: 2 }, { x: 2, y: 1 }],
          }
        ]
      },
      options: {
        elements: {
          point: {
            radius: 1,
            hoverRadius: 4,
          },
        },
        tooltips: {
          mode: 'index',
          intersect: false,
          position: 'nearest',
        },
        hover: {
          mode: 'index',
          intersect: false          
        }
      }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <canvas id="chart" />