为什么最高的数字会消失chart.js

时间:2017-03-09 15:38:00

标签: javascript asp.net-mvc chart.js

我正在使用带有asp.net mvc5的chart.js。我的图表工作正常,但顶部数字的标签显示不清楚。 任何idiea我必须做什么?

photo显示最高号码状态。

这是我的画布代码

  <div style="height:300px !important;  width:400px !important; display:inline-block !important;">
                <label for="chart1">
                    Prozent <br />

                </label>
                <canvas id="myChart1" width="400" height="400"></canvas>
            </div>

这是图表选项

options: {
                    //animation:false,
                    responsive: false,
                    responsiveAnimationDuration: 0,
                    scaleLineColor: "red",

                    scales: {
                        yAxes: [{
                            ticks: {
                                suggestedMin: minNum(getData2),
                                suggestedMax: maxNum(getData2),
                                beginAtZero: true,
                                fontSize: 12,
                                fontColor: "#000000",
                                callback: function(value, index, values) {
                                    if(parseInt(value) >= 1000){
                                        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                    } else {
                                        return  value;
                                    }
                                }
                            },
                            gridLines: {
                                show: true,

                            }
                        }],
                        xAxes: [{
                            ticks: {
                                autoSkip: false,
                                maxRotation: 90,
                                minRotation: 90,
                                fontSize: 16,
                                fontColor: "#000000",
                                callback: function(value, index, values) {
                                    if(parseInt(value) >= 1000){
                                        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                    } else {
                                        return  value;
                                    }
                                }
                            },

                            gridLines: {
                                display:false
                            }
                        }]
                    },
                    legend: {
                        display: false,

                    },
                    tooltips : {
                        enabled: false
                    },

                    animation: {

                        duration: 0,
                        onComplete: function () {
                            var ctx = this.chart.ctx;
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                            ctx.fillStyle = "black";
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';

                            this.data.datasets.forEach(function (dataset)
                            {
                                for (var i = 0; i < dataset.data.length; i++) {
                                    for(var key in dataset._meta)
                                    {
                                        var model = dataset._meta[key].data[i]._model;
                                        ctx.fillText(dataset.data[i], model.x, model.y - 3);
                                    }
                                }
                            });
                        }
                    }
                }
            });

0 个答案:

没有答案