我找不到根据html标签语言来翻译图表图例的方法。我一直到处都找不到成功，在chart.js上什么也没有，有人对如何做到这一点有所了解吗？
这是使用django制作的网页的页面，该页面的翻译是通过django i18n软件包和语言切换器按钮运行的。
我在HTML页面上附加了一个图形示例
var myChart4 = new Chart(ctx4, {
type: 'bar',
data: {
labels: labels4,
datasets: [{
label: 'Top Sellers (quantity sold/week)',
data: defaultData4,
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}],
options: {
scales: {
yAxes: [{
gridLines: {
drawOnChartArea: false,
ticks: {
beginAtZero: true
}
}
}],
}
}
}
})
“最畅销（每周出售的数量）”是我希望能够更改的部分。这就是html页面的样子：
<html>
{% load static %}
{% load i18n %}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Exostock </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}">
<!-- Font Awesome CSS-->
<link rel="stylesheet" href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}">
<!-- Custom Font Icons CSS-->
<link rel="stylesheet" href="{% static 'css3/font.css' %}">
<!-- Google fonts - Muli-->
{# <link rel="stylesheet" href="{% static 'https://fonts.googleapis.com/css?family=Muli:300,400,700' %}">#}
<!-- theme stylesheet-->
<link rel="stylesheet" href="{% static 'css3/style.default.css' %}">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="{% static 'css3/custom.css' %}">
{# <!-- Favicon-->#}
<link rel="stylesheet" href="{% static 'img/favicon.ico' %}">
{# <!-- Tweaks for older IEs--><!--[if lt IE 9]>#}
{# <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>#}
{# <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->#}
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg">
<div class="search-panel">
<div class="search-inner d-flex align-items-center justify-content-center">
<div class="close-btn">Close <i class="fa fa-close"></i></div>
<form id="searchbox" name="search_res" method="get" action="">
<div class="form-group">
<input id="searchbox" type="text" name="search_res" placeholder="What are you searching for...">
<button type="submit" class="submit">{% trans 'Search' %} </button>
</div>
</form>
</div>
</div>
<div class="container-fluid d-flex align-items-center justify-content-between">
<div class="navbar-header">
<!-- Navbar Header--><a href="{% url 'Home' %}" class="navbar-brand">
<div class="brand-text brand-big visible text-uppercase"><strong class="text-primary">Exo</strong><strong>Stock</strong></div>
<div class="brand-text brand-sm"><strong class="text-primary">X</strong><strong>S</strong></div></a>
<!-- Sidebar Toggle Btn-->
<button class="sidebar-toggle"><i class="fa fa-long-arrow-left"></i></button>
</div>
<div class="list-inline-item logout"> <a id="logout" href="{% url 'logout' %}?next=/loginUser" class="nav-link">{% trans 'Logout' %} <i class="icon-logout"></i></a></div>
</div>
</nav>
<!-- Tasks-->
<!-- Tasks end-->
<!-- Megamenu end -->
<!-- Languages dropdown -->
<!-- Log out -->
</header>
<div class="d-flex align-items-stretch">
<!-- Sidebar Navigation-->
<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div class="title">
<h1 class="h5">{% trans 'Inventory Analytics' %}</h1>
<p>{% trans 'Welcome' %}</p>
</div>
</div>
<!-- Sidebar Navidation Menus--><span class="heading">{% trans 'Main' %}</span>
<ul class="list-unstyled">
<li class="active"><a href="{% url 'Home' %}"> <i class="icon-home"></i>{% trans 'Home' %} </a></li>
<li ><a href="analytics.html"> <i class="icon-chart"></i>{% trans 'Analytics' %} </a></li>
<li><a href="items.html"> <i class="icon-chart"></i>{% trans 'Items' %}</a></li>
<li><a href="Supplier.html"> <i class="icon-chart"></i>{% trans 'Supplier' %}</a></li>
<li><a href="SupplierData.html"> <i class="icon-padnote"></i>{% trans 'Grouped Replenishment' %}</a></li>
<li><a href="ItemData.html"> <i class="icon-padnote"></i>{% trans 'Individual Replenishment' %}</a></li>
</ul>
</nav>
<!-- Sidebar Navigation end-->
<div class="page-content">
<div class="page-header">
<div class="container-fluid">
<h2 class="h5 no-margin-bottom">{% trans 'DASHBOARD' %}</h2>
</div>
</div>
<section class="no-padding-top no-padding-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="statistic-block block">
<div class="progress-details d-flex align-items-end justify-content-between">
<div class="title">
<div class="icon"><i class="icon-paper-and-pencil"></i></div><strong>{% trans 'Items in Alert' %}</strong>
</div>
<div class="number dashtext-1">
<h1>
<p> <a href="detailstockalerte.html">{{ count_alerte_items }}</a></p>
</h1>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="statistic-block block">
<div class="progress-details d-flex align-items-end justify-content-between">
<div class="title">
<div class="icon"><i class="icon-paper-and-pencil"></i></div><strong>{% trans 'ITEMS TRENDING' %}</strong>
</div>
<div class="number dashtext-2">
<h1>
<p><a href="detailstocktrend.html">{{ count_trend }}</a></p>
</h1>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="statistic-block block">
<div class="progress-details d-flex align-items-end justify-content-between">
<div class="title">
<div class="icon"><i class="icon-paper-and-pencil"></i></div><strong>{% trans 'Alerte Service Level' %}</strong>
</div>
<div class="number dashtext-2">
<h1>
<p><a href="detailalerteservice.html">{{ count_alerte_service }}</a></p>
</h1>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="statistic-block block">
<div class="progress-details d-flex align-items-end justify-content-between">
<div class="title">
<div class="icon"><i class="icon-paper-and-pencil"></i></div><strong>{% trans 'Candidates Replenishment' %}</strong>
</div>
<div class="number dashtext-4">
<h1>
<p><a href="detailscandidate.html">{{ count_candidates }}</a></p>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="no-padding-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card-footer small text-muted"> {% trans 'TWO WEEKS INVENTORY MOVEMENT' %}</div>
<div class="line-chart block">
<canvas id="myChart5"></canvas>
</div>
</div>
<div class="col-lg-6">
<div class="card-footer small text-muted">{% trans '90 DAYS INVENTORY DEMAND PREDICTIONS' %} </div>
<div class="doughnut-chart block">
<canvas id="myChart6"></canvas>
</div>
</div>
</div>
</div>
</section>
<section class="no-padding-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="stats-2-block block d-flex">
<div class="stats-2 d-flex">
<div class="stats-2-content"><strong class="d-block">
<h3> {{ total_inventory_val }} </h3>
</strong><span class="d-block">{% trans 'Inventory Value in dollars ($)' %}</span>
</div>
</div>
<div class="stats-2 d-flex">
<div class="stats-2-content"><strong class="d-block">
<h3>{{ count_orders }} </h3>
</strong><span class="d-block">{% trans 'Orders Placed' %}</span>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="stats-2-block block d-flex">
<div class="stats-2 d-flex">
<div class="stats-2-content"><strong class="d-block">
<h3>{{ items_actifs }} </h3>
</strong><span class="d-block">{% trans 'quantity of active items' %}</span>
</div>
</div>
<div class="stats-2 d-flex">
<div class="stats-2-content"><strong class="d-block">
<h3>{{ suppliers_actifs }} </h3>
</strong><span class="d-block">{% trans 'Quantity of active suppliers' %}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="no-padding-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card-footer small text-muted">{% trans 'TOP PERFORMERS' %}</div>
<div class="line-chart block">
<canvas id="myChart4" height="175"></canvas>
</div>
</div>
<div class="col-lg-6">
<div class="card-footer small text-muted">{% trans 'ITEMS IN DIFFICULTY' %}</div>
<div class="bar-chart block">
<canvas id="myChart3" height="175"></canvas>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__block block no-margin-bottom">
<div class="container-fluid text-center">
<div class ="row text-center">
<div class="col-lg-3">
<form id= "form_{{ language.code }}" action="{% url 'set_language' %}" method="post">{% csrf_token %}
<input type="hidden" name="text" value="{{ redirect_to }}">
<select name="language" id="">
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<option value="{{ language.code }}" {% if language.code == LANGUAGE_CODE %} selected {% endif %}>
{{ language.name_local }} ({{ language.code }})
</option>
{% endfor %}
</select>
<button type="submit" value="Go" class="learn_more2">Go</button>
</form>
</div>
<div class="col-lg-3">
<p class="no-margin-bottom align-items-center" >2020 © Exostock.<a></a></p>
</div>
<div class="col-lg-3">
<a href=""><span>Support</span></a>
</div>
<div class="col-lg-3">
<a href=""><span>Documentation</span></a>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
</html>
Chart.js的设置非常灵活。而不是像[
这样的静态文本标签...
labels: 'Top Sellers (quantity sold/week)',
...
您可以使用类似的功能
...
labels: i18nLabels("eng"),
...
然后，您当然需要创建该函数，该函数将从<html>标记或浏览器设置中提取语言。
这里是一个演示：https://codepen.io/adelriosantiago/pen/rNOEBmY?editors=0010，尝试在第19行附近从labels: i18nLabels("spa")切换到labels: i18nLabels("eng")。