如何更改图表工具提示中的货币符号?

时间:2019-05-23 07:01:44

标签: chart.js

我想替换图形工具提示中的货币符号,我不知道该货币符号在工具提示中出现的位置,我试图找出但卡住了,请帮助我弄清楚我正在使用Chart.min.js进行显示图表

我检查了css文件和chart.min.js文件,以查找货币符号出现的位置,但无法弄清楚

<div class="chart">
   <!-- Chart wrapper -->
   <canvas id="chart-sales" class="chart-canvas"></canvas>
</div>

var Charts = (function() {

// Variable

var $toggle = $('[data-toggle="chart"]');
var mode = 'light';//(themeMode) ? themeMode : 'light';
var fonts = {
    base: 'Open Sans'
}

// Colors
var colors = {
    gray: {
        100: '#f6f9fc',
        200: '#e9ecef',
        300: '#dee2e6',
        400: '#ced4da',
        500: '#adb5bd',
        600: '#8898aa',
        700: '#525f7f',
        800: '#32325d',
        900: '#212529'
    },
    theme: {
        'default': '#172b4d',
        'primary': '#1e5c75',
        'secondary': '#f4f5f7',
        'info': '#11cdef',
        'success': '#2dce89',
        'danger': '#f5365c',
        'warning':'#1e5c75'
        //'warning': '#fb6340'
    },
    black: '#12263F',
    white: '#FFFFFF',
    transparent: 'transparent',
 };


// Methods

// Chart.js global options
function chartOptions() {

    // Options
    var options = {
        defaults: {
            global: {
                responsive: true,
                maintainAspectRatio: false,
                defaultColor: (mode == 'dark') ? colors.gray[700] :colors.gray[600],
                defaultFontColor: (mode == 'dark') ? colors.gray[700] :colors.gray[600],
                defaultFontFamily: fonts.base,
                defaultFontSize: 13,
                layout: {
                    padding: 0
                },
                legend: {
                    display: false,
                    position: 'bottom',
                    labels: {
                        usePointStyle: true,
                        padding: 16
                    }
                },
                elements: {
                    point: {
                        radius: 0,
                        backgroundColor: colors.theme['primary']
                    },
                    line: {
                        tension: .4,
                        borderWidth: 4,
                        borderColor: colors.theme['primary'],
                        backgroundColor: colors.transparent,
                        borderCapStyle: 'rounded'
                    },
                    rectangle: {
                        backgroundColor: colors.theme['warning']
                    },
                    arc: {
                        backgroundColor: colors.theme['primary'],
                        borderColor: (mode == 'dark') ? colors.gray[800] : colors.white,
                        borderWidth: 4
                    }
                },
                tooltips: {
                    enabled: false,
                    mode: 'index',
                    intersect: false,
                    custom: function(model) {

                        // Get tooltip
                        var $tooltip = $('#chart-tooltip');

                        // Create tooltip on first render
                        if (!$tooltip.length) {
                            $tooltip = $('<div id="chart-tooltip" class="popover bs-popover-top" role="tooltip"></div>');

                            // Append to body
                            $('body').append($tooltip);
                        }

                        // // Hide if no tooltip
                        // if (model.opacity === 0) {
                            // $tooltip.css('display', 'none');
                            // return;
                        // }

                        function getBody(bodyItem) {
                            return bodyItem.lines;
                        }

                        // Fill with content
                        if (model.body) {
                            var titleLines = model.title || [];
                            var bodyLines = model.body.map(getBody);
                            var html = '';

                            // Add arrow
                            html += '<div class="arrow"></div>';

                            // Add header
                            titleLines.forEach(function(title) {
                                html += '<h3 class="popover-header text-center">' + title + '</h3>';
                            });

                            // Add body
                            bodyLines.forEach(function(body, i) {
                                var colors = model.labelColors[i];
                                var styles = 'background-color: ' + colors.backgroundColor;
                                var indicator = '<span class="badge badge-dot"><i class="bg-primary"></i></span>';
                                var align = (bodyLines.length > 1) ? 'justify-content-left' : 'justify-content-center';
                                html += '<div class="popover-body d-flex align-items-center ' + align + '">' + indicator + body + '</div>';
                            });

                            $tooltip.html(html);
                        }

                        // Get tooltip position
                        var $canvas = $(this._chart.canvas);

                        var canvasWidth = $canvas.outerWidth();
                        var canvasHeight = $canvas.outerHeight();

                        var canvasTop = $canvas.offset().top;
                        var canvasLeft = $canvas.offset().left;

                        var tooltipWidth = $tooltip.outerWidth();
                        var tooltipHeight = $tooltip.outerHeight();

                        var top = canvasTop + model.caretY - tooltipHeight - 16;
                        var left = canvasLeft + model.caretX - tooltipWidth / 2;

                        // Display tooltip
                        $tooltip.css({
                            'top': top + 'px',
                            'left': left + 'px',
                            'display': 'block',
                            'z-index': '100'
                        });

                    },
                    callbacks: {
                        label: function(item, data) {
                            var label = data.datasets[item.datasetIndex].label || '';
                            var yLabel = item.yLabel;
                            var content = '';

                            if (data.datasets.length > 1) {
                                content += '<span class="badge badge-primary mr-auto">' + label + '</span>';
                            }

                            content += '<span class="popover-body-value">' + yLabel + '</span>' ;
                            return content;
                        }
                    }
                }
            },
            doughnut: {
                cutoutPercentage: 83,
                tooltips: {
                    callbacks: {
                        title: function(item, data) {
                            var title = data.labels[item[0].index];
                            return title;
                        },
                        label: function(item, data) {
                            var value = data.datasets[0].data[item.index];
                            var content = '';

                            content += '<span class="popover-body-value">' + value + '</span>';
                            return content;
                        }
                    }
                },
                legendCallback: function(chart) {
                    var data = chart.data;
                    var content = '';

                    data.labels.forEach(function(label, index) {
                        var bgColor = data.datasets[0].backgroundColor[index];

                        content += '<span class="chart-legend-item">';
                        content += '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>';
                        content += label;
                        content += '</span>';
                    });

                    return content;
                }
            }
        }
    }

    // yAxes
    Chart.scaleService.updateScaleDefaults('linear', {
        gridLines: {
            borderDash: [2],
            borderDashOffset: [2],
            color: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
            drawBorder: false,
            drawTicks: false,
            lineWidth: 0,
            zeroLineWidth: 0,
            zeroLineColor: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
            zeroLineBorderDash: [2],
            zeroLineBorderDashOffset: [2]
        },
        ticks: {
            beginAtZero: true,
            padding: 10,
            callback: function(value) {
                if (!(value % 10)) {
                    return value
                }
            }
        }
    });

    // xAxes
    Chart.scaleService.updateScaleDefaults('category', {
        gridLines: {
            drawBorder: false,
            drawOnChartArea: false,
            drawTicks: false
        },
        ticks: {
            padding: 20
        },
        maxBarThickness: 10
    });

    return options;

}

// Parse global options
function parseOptions(parent, options) {
    for (var item in options) {
        if (typeof options[item] !== 'object') {
            parent[item] = options[item];
        } else {
            parseOptions(parent[item], options[item]);
        }
    }
}

// Push options
function pushOptions(parent, options) {
    for (var item in options) {
        if (Array.isArray(options[item])) {
            options[item].forEach(function(data) {
                parent[item].push(data);
            });
        } else {
            pushOptions(parent[item], options[item]);
        }
    }
}

// Pop options
function popOptions(parent, options) {
    for (var item in options) {
        if (Array.isArray(options[item])) {
            options[item].forEach(function(data) {
                parent[item].pop();
            });
        } else {
            popOptions(parent[item], options[item]);
        }
    }
}

// Toggle options
function toggleOptions(elem) {
    var options = elem.data('add');
    var $target = $(elem.data('target'));
    var $chart = $target.data('chart');

    if (elem.is(':checked')) {

        // Add options
        pushOptions($chart, options);

        // Update chart
        $chart.update();
    } else {

        // Remove options
        popOptions($chart, options);

        // Update chart
        $chart.update();
    }
}

// Update options
function updateOptions(elem) {
    var options = elem.data('update');
    var $target = $(elem.data('target'));
    var $chart = $target.data('chart');

    // Parse options
    parseOptions($chart, options);

    // Toggle ticks
    toggleTicks(elem, $chart);

    // Update chart
    $chart.update();
}

// Toggle ticks
function toggleTicks(elem, $chart) {

    if (elem.data('prefix') !== undefined || elem.data('prefix') !== undefined) {
        var prefix = elem.data('prefix') ? elem.data('prefix') : '';
        var suffix = elem.data('suffix') ? elem.data('suffix') : '';

        // Update ticks
        $chart.options.scales.yAxes[0].ticks.callback = function(value) {
            if (!(value % 10)) {
                return prefix + value + suffix;
            }
        }

        // Update tooltips
        $chart.options.tooltips.callbacks.label = function(item, data) {
            var label = data.datasets[item.datasetIndex].label || '';
            var yLabel = item.yLabel;
            var content = '';

            if (data.datasets.length > 1) {
                content += '<span class="popover-body-label mr-auto">' + label + '</span>';
            }

            content += '<span class="popover-body-value">' + prefix + yLabel + suffix + '</span>';
            return content;
        }

    }
}


// Events

// Parse global options
if (window.Chart) {
    parseOptions(Chart, chartOptions());
}

// Toggle options
$toggle.on({
    'change': function() {
        var $this = $(this);

        if ($this.is('[data-add]')) {
            toggleOptions($this);
        }
    },
    'click': function() {
        var $this = $(this);

        if ($this.is('[data-update]')) {
            updateOptions($this);
        }
    }
});


// Return

return {
    colors: colors,
    fonts: fonts,
    mode: mode
};

})();

当我将鼠标悬停在图形上时,上面的代码在工具提示中提供了$ 10,000的输出,但我想用自己的货币符号替换美元符号

0 个答案:

没有答案