更改工具提示标题或添加更多标签

时间:2019-05-15 05:07:57

标签: javascript php html chart.js

我正在使用chart.js v2创建图表,并从数据库中获取数据。

我想将工具提示标题从id_office []更改为name_office [],或者如果不可能,请在工具提示信息中添加新标签:name_office []。

目前,工具提示仅显示id_office []和bpu []数据。

这是我的代码

   function chart_dashboard(data) {
    var bpu = [];                       
    var id_office = [];
    var name_office = [];

    for (i = 0; i < data.list_chart_dashboard.length; i++) {
        var obj = data.list_chart_dashboard[i];
        bpu.push(obj.penambahan_TK_BPU);
        id_office.push(obj.id_office);
        name_office.push(obj.name_office);
    }


    var chartdata = {
        labels: id_office,
        datasets : [{
            label: 'BPU',
            backgroundColor: [
                'rgba(114, 12, 34, 0.2)'
            ],
            borderColor: 'rgba(32,99,12,1)',
            hoverBackgroundColor: 'rgba(34, 45, 50, 0.2)',
            hoverBorderColor: 'rgba(89, 162, 134)',
            borderWidth:1,
            data: bpu
        }]
    };

    var ctx = $("#chart_dashboard")[0].getContext('2d');
    var barGraph = new Chart(ctx, {

        type: 'bar',
        data: chartdata,
            // Configuration options go here
        options: {
            responsive: true,

            "hover": {
                "animationDuration": 0
            },
            "animation": {
                "duration": 1,
                "onComplete": function() {
                    var chartInstance = this.chart,
                    ctx = chartInstance.ctx;

                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function(dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function(bar, index) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                        });
                    });
                }
            },
            tooltips: {
                "enabled": true
            },
            scales: {      
                xAxes: [{
                }],

                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        fontSize: 10,
                        //max: 300
                        //stepSize: 10
                    },  

                    scaleLabel: {
                        display: true,
                        labelString: "employee BPU"
                    }
                }]
            }
        }
    });  
}

因此工具提示变为

id_office, name_office, bpu

谢谢您的帮助,对不起我的英语不好。

0 个答案:

没有答案