Question

我已经使用ChartJS创建了雷达图，如下所示：

HTML：

from plotly import offline
from plotly import graph_objs as go
offline.init_notebook_mode(connected=False)

df3 = {'x':[1, 2, 3, 4, 5],'y':[10, 20, 30, 40, 50],'z': [[5, 4, 3, 2, 1]]*5}
offline.iplot(dict(data=[go.Surface(x=df3['x'], y=df3['y'], z=df3['z'])]))

JS：

<canvas id="radarChartTest" width="800" height="600"></canvas>
<script>
    radarChartTest(["A", "B", "C", "D"], [5, 10, 15, 20], document.getElementById("radarChartTest"));
</script>

JSFiddle

该图表绘制并填充良好。但是，当我将鼠标悬停在雷达点上时，它不会显示该值：

function radarChartTest(categories, totals, chartToPopulate) { var chartDisplay = chartToPopulate; var newChart = new Chart(chartDisplay, { type: 'radar', data: { labels: categories, datasets: [ { data: totals, label: "test" } ] } }) }后应该有一个数字。

我期望与此类似：

我缺少属性或其他内容吗？我已经检查了文档，但找不到任何东西。我也将代码与找到的位置（a working example）进行了比较，但也找不到任何内容。

Answer 1

这是由于Chart.js（Values on Tooltip of Radar Chart is not shown）最新（2.8.0）版本中的错误所致。

您可以通过降级到2.7.3暂时修复它。

Updated working Fiddle（版本2.7.3）

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js">

Answer 2

As far as I can tell I had the same problem a while ago, maybe, because I'll need to research a little more about this issue, the problem is due to a previous version of Chart.js. In any case here is a CodePen with a solution to your problem RadarChart Example. Hope this helps. Cheers, sigfried.

UPDATE Since this is not only about the answers here is the link from the documentation of Chart.js that I used to solve the tooltips issue Label Callbacks.

Answer 3

I tried to re-create the problem you have but it looks all good to me.(A number after "total")

Since you only post part of your code, I am not sure where you are confused. So I attached the full code I created here. Compare it to your code and let me know if you still can't generate the figure you want.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript chart</h2>

<p>Radar Chart Demo </p>

<canvas id="radar-chart" width="800" height="600"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"> 
</script>
<script>

function radarChart(categories, totals, averages, chartToPopulate, chartTitle) {
var chartDisplay = chartToPopulate;
var newChart = new Chart(chartDisplay, {
    type: 'radar',
    data: {
        labels: categories,
        datasets: [
            {
                data: averages,
                pointBackgroundColor: ["rgba(199,54,54,1)", "rgba(199,54,122,1)", "rgba(199,54,154,1)", "rgba(146,54,199,1)", "rgba(69,54,199,1)", "rgba(54,103,199,1)", "rgba(54,165,199,1)", "rgba(54,199,180,1)"],
                pointBorderColor: ["rgba(199,54,54,1)", "rgba(199,54,122,1)", "rgba(199,54,154,1)", "rgba(146,54,199,1)", "rgba(69,54,199,1)", "rgba(54,103,199,1)", "rgba(54,165,199,1)", "rgba(54,199,180,1)"],
                pointRadius: 15,
                pointStyle: "cross",
                pointHoverRadius: 25,
                pointHoverBorderWidth: 3,
                pointRotation: 45,
                pointBorderWidth: 1.2,
                backgroundColor: "rgba(61,49,225,0.5)",
                borderColor: "rgba(61,49,225,1)",
                label: "Averages",
                fill: true
            },
            {
                data: totals,
                pointBackgroundColor: ["rgba(199,54,54,1)", "rgba(199,54,122,1)", "rgba(199,54,154,1)", "rgba(146,54,199,1)", "rgba(69,54,199,1)", "rgba(54,103,199,1)", "rgba(54,165,199,1)", "rgba(54,199,180,1)"],
                pointBorderColor: ["rgba(199,54,54,1)", "rgba(199,54,122,1)", "rgba(199,54,154,1)", "rgba(146,54,199,1)", "rgba(69,54,199,1)", "rgba(54,103,199,1)", "rgba(54,165,199,1)", "rgba(54,199,180,1)"],
                pointRadius: 15,
                pointStyle: "cross",
                pointHoverRadius: 25,
                pointHoverBorderWidth: 3,
                pointRotation: 45,
                pointBorderWidth: 1.2,
                backgroundColor: "rgba(225,49,52,0.35)",
                borderColor: "rgba(225,49,52,1)",
                label: "Totals",
                fill: true
        },                 
        ]
    },
    options: {
        maintainAspectRation: false,
        title: {
            display: true,
            text: chartTitle,
            fontSize: 16
        }
    }
})
return chartDisplay;
}


var Chart = radarChart(["1","2","3","4"], [100,200,300,400], [10,20,30,40], 
document.getElementById("radar-chart"), "TEST")

document.getElementById("radar-chart").innerHTML = Chart;
</script>

</body>
</html>

Answer 4

我正在使用2.8版，并且遇到了相同的问题，以解决

tooltips: {
                enabled: true,
                callbacks: {
                    label: function(tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].label + ' : ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    }
                }
            }

查看问题

https://github.com/chartjs/Chart.js/issues/6188#issuecomment-497251833

将鼠标悬停在雷达图上的某个点上时，为什么看不到数据值？

4 个答案: