chart.js tooltip自定义样式


效果图:

关键代码:

var options = {
                legend: false,
                gridLines: {
                    display: false
                },
                // labels: {
                //     style: {
                //         fontSize: "16",
                //         color: "#fff",
                //     },
                // },
                tooltips: {
                    callbacks: {
                        title: function() {
                            return "title";
                        },
                        beforeLabel: function(tooltipItem, data) {
                            return "beforeLabel";
                        },
                        label: function(tooltipItem, data) {
                            return "label";
                        },
                        afterLabel: function(tooltipItem, data) {
                            return "afterLabel";
                        }
                    }
                },
                scale: {
                    gridLines: {
                        color: "#143C3A"
                    },
                    angleLines: {
                        color: "#143C3A"
                    },
                    ticks: {
                        maxTicksLimit: 4,
                        display: false
                    },
                    pointLabels: {
                        fontSize: 12,
                        fontColor: "#fff"
                    }
                },
                scaleShowLine: true,
                angleShowLineOut: true,
                scaleShowLabels: true,
                scaleBeginAtZero: true,
                angleLineColor: "rgba(0,0,0,.1)",
                angleLineWidth: 1,
                pointLabelFontFamily: "'Arial'",
                pointLabelFontStyle: "normal",
                pointLabelFontSize: 16,
                pointLabelFontColor: "#fff",
                pointDot: true,
                pointDotRadius: 5,
                pointDotStrokeWidth: 1,
                pointHitDetectionRadius: 40,
                datasetStroke: true,
                datasetStrokeWidth: 3,
                datasetFill: true,
                responsive: true,

                //字符串-图例模板
                legendTemplate:
                    '
    <% for (var i=0; i
  • <%if(datasets[i].label){%><%=datasets[i].label%><%}%>
  • <%}%>
' };

文档:

http://chartjs.cn/docs/#radar-chart-example-usage

web