【发布时间】：2018-07-03 02:19:31
【问题描述】：
我有一个 chart.js 散点图，当您将鼠标悬停在该点上时，该散点图提供了调查受访者给出的分数的基本原理。这很好用，但是：
某些字符渲染不正确（到目前为止，我只发现这个 ' 渲染不正确的示例为 '，但我认为可能会出现一系列不太常见的标点符号项目。）这个在 Chrome 和 IE11 中都发生了。 Django 和 Chart.js 声称对 UTF-8 100% 满意，并且在 html 元数据中将其指定为 (charset='utf8') 属性。 回答：django 模板过滤器 |escapejs 应用于每个字符串。
'rationale' 字符串（我认为最多 200 个字符）大部分进入 'afterLabel' 字段，由于某种原因，它从开始的地方延伸到图表水平轴，留下很多空白空间和奇怪的样子。
我需要帮助编写 javascript，因为如果您查看我构建这些回调的方式，它们会打破整个“基本原理”以获得第一行（用于标签）和第二行 - thru-nth 行（用于 afterLabel）。
从 Django 应用程序中填充数据，并使用 Django 模板系统将文本放入图表中；我认为这与 Django 无关。是否需要启用 chart.js 配置选项，还是需要切换到标签的 html 呈现？ 参见上文第 1 部分的答案。
这是模板：
{% block Chart %}
<div class="container" style="width:65vw" >
<canvas id="canvas{{ temp_summary.question }}" class="chart-js-render-monitor" width="300" height="300">
</canvas>
</div>
<script>
var color = Chart.helpers.color;
var scatterChartData = {
datasets: [{
label: "Maxima",
pointRadius: 10,
pointHoverRadius: 12,
borderColor: 'rgba(255, 99, 132, 0.5)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
labels: [{% for row in data_series %} "{{ row.6}}", {%endfor%} ],
data: [
{% for row in data_series %}
{
x: "{{ row.0 }}",
y: "{{ row.2 }}",
},
{% endfor %}
]
},
{
label: "Minima",
pointRadius: 10,
pointHoverRadius: 12,
borderColor: 'rgba(54, 162, 235, 0.5)',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
labels: [{% for row in data_series %} "{{ row.5}}", {%endfor%} ],
data: [
{% for row in data_series %}
{
x: "{{ row.0 }}",
y: "{{ row.1 }}",
},
{% endfor %}
]
}, {
label: "Estima",
pointRadius: 10,
pointHoverRadius: 12,
borderColor: 'rgba(0, 0, 0, 0.5)',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
labels: [{% for row in data_series %} "{{ row.7}}", {%endfor%} ],
data: [
{% for row in data_series %}
{
x: "{{ row.0 }}",
y: "{{ row.3 }}",
},
{% endfor %}
]
}
]
};
var formatString = function(string, allowed_width, for_label) {
var length = string.length;
var paraLength = allowed_width;
var paragraphs = [];
for (var i=0; i < allowed_width; i++) {
var marker = paraLength;
//if the marker is right after a space, move marker back one character
if (string.charAt(marker-1) == " ") {
marker--;
}
//move marker to end of a word if it's in the middle
while(string.charAt(marker) != " " && string.charAt(marker) != "") {
marker++;
}
var nextPara = string.substring(0, marker)
paragraphs.push(nextPara)
string = string.substring((nextPara.length+1),string.length)
}
if (for_label) {return paragraphs[0] }; // label is the first line
if (!for_label) {return paragraphs.slice(1)}; // afterlabel is a subsequent line
};
window.onload = function() { // scatter_chart
var ctx = document.getElementById("canvas{{ temp_summary.question }}").getContext("2d");
window.myScatter = Chart.Scatter(ctx, {
data: scatterChartData,
options: {
layout: {
padding: {
left: 11,
right: 11,
bottom: 11,
top: 11,},
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: 0.8,
padding: 11,
stepSize: 1,
}
}]
},
title: {
display: true,
text: 'Maxima, Minima and Estima by User'
},
fill: false,
showLines: false,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var text1 = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index]
return formatString(text1, 60, true)
},
afterLabel: function(tooltipItem, data){
var text2 = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index]
return formatString(text2, 60, false)
},
},
}
}
}
);
};
</script>
{% endblock %}
【问题讨论】：
-
请不要用里面的答案编辑您的问题：相反，通过回复您自己的答案帖子来移动您的解决方案。
标签： javascript chart.js2