时间戳

首页 > 解决方案 > Chart.JS 多个插件不运行

javascript - Chart.JS 多个插件不运行

问题描述

我正在使用 chart.js 并尝试将 2 个插件添加到同一个图表，但是应用时，两个插件都会消失，并且控制台中没有直接错误。

有谁知道如何为同一个图表实现两个插件？

第一个插件

第二个插件参考

基本上，图表必须在折线图上显示数据标签，同时绘制 yAxis 线，但只能从折线图上的点开始。

出于某种原因，当两者都应用时，图表将不会显示其中任何一个。

    Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
        color : '#ffffff'
    })
    // Chart.plugins.unregister(ChartDataLabels);
    // var chart = new Chart(ctx, {
    // / plugins: [ChartDataLabels],
    // options: {
    // // ...
    // }
    // })
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type : 'line',

        // The data for our dataset
        data : {
            labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
            datasets : [ {
                label : 'My first dataset',
                borderWidth : 3,
                borderColor : 'rgb(255,0, 0)',
                data : data1,
            } ]
        },

        // Configuration options go here
        options : {
            elements : {
                point : {
                    radius : 3
                }
            },
            legend : {
                display : false,
                labels : {
                    fontColor : "white",
                    fontSize : 18
                }
            },
            scales : {
                yAxes : [ {
                    ticks : {
                        fontSize : 0,
                        beginAtZero : false,
                        max : 40,
                    },
                    gridLines : {
                        display : false,
                        drawBorder : false,
                    }
                } ],
                xAxes : [ {
                    ticks : {
                        fontColor : "white",
                        fontSize : 14,
                        beginAtZero : 0,
                    },
                    gridLines : {
                        display : false,
                    }
                } ]
            },
             plugins : [ { // this is the magical bit :)
                        afterRender : function(c, options) {
                            let
                            meta = c.getDatasetMeta(0), max;
                            c.ctx.save();
                            c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
                            c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
                            c.ctx.beginPath();
                            meta.data
                                    .forEach(function(e) {
                                        if (max == undefined
                                                || c.config.data.datasets[0].data[e._index] > max) {
                                            max = c.config.data.datasets[0].data[e._index];
                                        }
                                        c.ctx.moveTo(e._model.x,
                                                meta.dataset._scale.bottom);
                                        c.ctx
                                                .lineTo(e._model.x,
                                                        e._model.y);
                                    });
                            c.ctx.textBaseline = 'top';
                            c.ctx.textAlign = 'right';
                            c.ctx.fillStyle = 'black';
                            c.ctx.fillText('Max value: ' + max,
                                    c.width - 10, 10);
                            c.ctx.stroke();
                            c.ctx.restore();
                        }
                    } ],
            tooltips : {
                callbacks : {
                    label : function(tooltipItem) {
                        console.log(tooltipItem)
                        return tooltipItem.yLabel;
                    }
                }
            }
        }

    });



var data1 = [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ];
    myChart(data1);

HTML .js 代码

<script src="js/chart.js"></script>
    <!-- data label .js -->
<script
    src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.5.0"></script>
    <!-- yAxis lines .js -->
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

标签： javascripthtmlcsschart.js

解决方案

var chart = new Chart(document.getElementById('chart'), {        
    type : 'line',		        
    data : {
        labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
        datasets : [ {
            label : 'My first dataset',
            borderWidth : 1,
            borderColor : 'rgb(255,0, 0)',
            data : [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ],
             datalabels: {
          align: 'end',
          anchor: 'end',								
                  backgroundColor: 'rgb(255, 120, 12, .2)',
borderRadius: 20
             }
        }]
    },        
    options : {
        scales : {
			xAxes : [ {
				gridLines : {
                    display : false,						
					color: 'rgba(255, 120, 12, .2)',						
					lineWidth: 5
                }
			} ],
			yAxes : [{
			    gridLines : {
                    display : false,                        
					color: 'rgba(255, 120, 12, .2)',
					lineWidth: 5
                },
                ticks : {
                    beginAtZero: true
                }
            }]				
        },
	},
    plugins : [{ // this is the magical bit :)
		afterRender : function(c, options) {
			let meta = c.getDatasetMeta(0), max;
			c.ctx.save();
            c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
            c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
            c.ctx.beginPath();
			meta.data.forEach(function(e) 
			{
				if (max == undefined || c.config.data.datasets[0].data[e._index] > max) {
					max = c.config.data.datasets[0].data[e._index];
				}
				c.ctx.moveTo(e._model.x,meta.dataset._scale.bottom);
				c.ctx.lineTo(e._model.x,e._model.y);
            });
            c.ctx.textBaseline = 'top';
            c.ctx.textAlign = 'right';
            c.ctx.fillStyle = 'black';
            c.ctx.fillText('Max value: ' + max, c.width - 10, 10);
            c.ctx.stroke();
			c.ctx.restore();
		}
	}],
	tooltips : {
            callbacks : {
                label : function(tooltipItem) {
                    console.log(tooltipItem)
                    return tooltipItem.yLabel;
                }
            }
        }        
});
>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.6.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>

推荐阅读