文章/答案/技术大牛

发布

社区首页 >问答首页 >图表JS工具提示标签没有显示正确的值

问图表JS工具提示标签没有显示正确的值
EN

Stack Overflow用户

提问于 2022-05-17 23:15:25

回答 1查看 170关注 0票数 0

我正在做一个Java项目，我们使用GsonBuilder用ChartJ创建图表。我的JSON看起来如下：

 {
      "data": {
        "datasets": [
          {
            "data": [
              {
                "x": "05/12/2022 07:00:00",
                "y": "1",
                "value": "value A"
              },
              {
                "x": "05/13/2022 14:08:00",
                "y": "1",
                "value": "value B"
              }
            ],
            "label": "Bacteria",
            "borderColor": "#a1c450",
            "yAxisID": "Values",
          }
        ]
      },
      "options": {
        "plugins": {
          "tooltip": {
            "mode": "single",
            "callbacks": {
              "label": "function(tooltipItem, data) {return tooltipItem.value;}"
            },
            "enabled": true
          }
        },
        "scales": {
          "yAxes": [
            {
              "scaleLabel": {
                "labelString": "Values",
                "display": false
              },
              "display": false,
              "id": "Values",
              "position": "right"
            }
          ],
          "xAxes": [
            {
              "display": true,
              "type": "time"
            }
          ]
        }
      },
      "type": "scatter"
    }

工具提示不是显示“值A/B”，而是显示相应数据项的"x，y“。

看这里

我尝试过返回data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].value;，但没有成功。

java

chart.js

label

gson

tooltip

回答 1

Stack Overflow用户

发布于 2022-05-18 10:30:03

这是因为您使用的是V2 of Chart.js，而工具提示使用的是V3语法。这不管用。V2中工具提示的选项放置在不同的位置：

const options = {
  type: 'scatter',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
          x: 0.2505597250394178,
          y: 12
        },
        {
          x: 0.1629651642029184,
          y: 19
        },
        {
          x: 0.6825862858121792,
          y: 3
        },
        {
          x: 0.39821027356939087,
          y: 5
        },
        {
          x: 0.1088502186196103,
          y: 2
        },
        {
          x: 0.7836566822098099,
          y: 3
        }
      ],
      backgroundColor: 'orange'
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: (ttItem) => (ttItem.value)
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72281650

复制

相似问题

问图表JS工具提示标签没有显示正确的值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图表JS工具提示标签没有显示正确的值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图表JS工具提示标签没有显示正确的值
EN