Question

我的计划是开发如下所示的条形图 enter image description here

我正在角度JS平台中开发它，并使用图表JS库来绘制图表。

问题是我无法在鼠标上显示工具提示，如图所示。 Chart JS仅允许将x和y轴测量显示为工具提示。任何人都知道如何在工具提示中显示一些文字。请帮助。

控制器代码

 $scope.chartdata = {
        labels: barchartYaxis,
        datasets: [
            {
                //label:['a','b','c','d','e','f','g','h','i','j','k','l'],
                label: '',
                fillColor: 'rgba(235,163,94,0.5)',
                strokeColor: 'rgba(220,220,220,0.8)',
                highlightFill: 'rgba(229,136,94,0.75)',
                highlightStroke: 'rgba(220,220,220,1)',
                data: barchartXaxis
            }
        ]
    };

    // Chart.js Options
    $scope.chartoptions = {
        responsive: true,
        scaleBeginAtZero: true,
        scaleShowGridLines: true,
        scaleGridLineColor: "rgba(0,0,0,.05)",
        scaleGridLineWidth: 1,
        barShowStroke: true,
        barStrokeWidth: 2,
        barValueSpacing: 5,
        barDatasetSpacing: 1,
        showTooltips: true,
        tooltipEvents: ["mousemove", "touchstart", "touchmove"],
        tooltipFillColor: "rgba(0,0,0,0.8)",
        tooltipTemplate: "<%=label%>,<%=value%>"
        //tooltipTemplate: "<%if (label){%>"+getHtmlFromTopicName("<%=label%>")+"<%}%>"
        //$scope.userDetails = data.user_details;
    }

模板文件

<canvas tc-chartjs-bar chart-options="chartoptions" chart-data="chartdata" auto-legend></canvas>

Answer 1

我使用angular-chart.js指令在角度应用程序中使用自定义工具提示处理chart.js图表：

我使用yeoman（yo angular）创建了我的脚手架应用程序，并使用

添加了指令

bower install angular-chart.js --save

我将它添加到app.js

中的模块中

angular.module('chartapp', ['chart.js'])

图表的标记是

<canvas id="line" class="chart chart-line" data="data"
  labels="labels" legend="true" series="series"
  click="onClick">
</canvas>

我的控制器为图表提供了以下数据：

angular.module('oauthClientApp')
    .controller('ChartCtrl', function ($scope) {

        $scope.labels=['Jan', 'Feb', 'Mar', 'Apr', 'May'];

        $scope.series=['Series A'];

        $scope.data = [[10, 20, 30, 20, 10]];

        $scope.onClick = function(points, evt) {
            console.log(points, evt);
        };

您可以对全局Chart对象执行的自定义设置为here

具体来说，我设置的tooltipTemplate如下：

Chart.defaults.global.tooltipTemplate = function(value) {
    if (value.label)  {
        return value.label + ":" + value.value;
    } else {
        return value.value;
    }
};

每次生成工具提示时都会调用它。

如果你的图表有多个系列，那么你需要对multiTooltipTemplate做同样的事情：

Chart.defaults.global.multiTooltipTemplate = function(value) {
    return 'The value is ' + value.value;
};

每个系列都会调用它。

您可以执行许多其他自定义操作。

艾

如何在鼠标移过Chart js条形图上的条形图时自定义工具提示

1 个答案: