Question

我有一张chart.js散点图，它提供了当您将鼠标悬停在该点上时所给出的分数的调查受访者理由。这很好用，但是：

某些字符的呈现方式不正确（到目前为止，我只发现这个＆＃39;呈现错误的示例＆amp;＃39，但我认为会有一系列不太常见的标点项目，可能会出现。）Chrome和IE11都会出现这种情况。 Django和Chart.js声称对UTF-8 100％满意，并且它被指定（charset =＆＃39; utf8＆＃39;）作为html元中的属性。答案：django模板过滤器| escapejs应用于每个字符串。
＆＃39;理由＆＃39;字符串（我认为最多200个字符）主要进入后面的字符串＃39;字段，由于某种原因从它开始的任何地方延伸到图表水平轴，留下了很多空的空间和奇怪的外观。
我需要帮助编写javascript，因为如果你看一下我建立这些回调的方式，他们就会打破整个基本原理＆＃39;得到第一行（对于Label）和第二行（对于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 %}

Answer 1

项目符号1（字符显示不正确）的答案是我天真地认为：

labels: [{% for row in data_series %} "{{ row.6}}", {%endfor%} ],

javascript引擎始终可以理解

。如果标签（row.6）包含'或'，则javascript引擎会尽力而为，但是这些字符（和其他字符）需要使用前导“ \”进行正确转义。Django会使用模板标签| escapejs。

关于这些标签的高度设置的问题仍然是我尚未解决的问题。

chart.js工具提示文本下面的空白区域

1 个答案: