Javascript ChartJS-图例和工具提示选项

这是我第一次使用ChartJSV2。 我创建了一个包含多个数据集的简单折线图

我有三个问题：

1-显示的数据正确，但图例有问题，因为它们与画布外的颜色框左对齐，每行一个，如下图（）所示

我想要像

float:left这样的图例在css中

2-另一个问题是工具提示，它们非常大。。如下图所示。（）


我试图找到实现这一目标的方法，但我很难做到这一点

3-我希望y轴上的间隔为1而不是0.1

下面是用于创建图表的JS代码：

        var scripts = $(".sending-data");
        var datasets = [];
        var days = [];

        var counter = 0;
        scripts.each(function (index, script){

            var json = JSON.parse(script.innerHTML);
            var data = [];

            for (var i = 0; i<json.DATA.length; i++) {
                data.push(json.DATA[i][2]);
                if (counter === 0)
                    days.push(json.DATA[i][1].substr(8, 2));
            }

            var r = Math.floor((Math.random() * 255) + 1);
            var g = Math.floor((Math.random() * 255) + 1);
            var b = Math.floor((Math.random() * 255) + 1);
            var rgbStr = r+ ", " +g + ", " + b;
            console.log(rgbStr);


            datasets.push({
                label: "## " + $(script).attr("data-send-id"),
                backgroundColor: 'rgba('+rgbStr+', 0.2)',
                borderColor: 'rgba('+rgbStr+', 1)',
                borderWidth: 2,
                lineTension: 0.1,
                data: data,
                fill: false
            });
            counter++;
        });

        var config ={
            type: 'line',
            data: {
                labels: days,
                datasets: datasets
            },
            options: {
                title: {
                    display: true,
                    text: 'Custom Chart Title'
                },
                responsive : true,
                legend: {
                    fullWidth: false,
                    boxWidth: 50,
                    padding: 40,
                    position: "top",
                    display: true
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            stepSize: 1
                        }
                    }]
                }
            }
        };

    var ctx = document.querySelector("##canvas-chart").getContext("2d");
    console.log(document.querySelector("##canvas-chart"));
    var myLine = new Chart(ctx, config);

var脚本=$（“.sending data”）；
var数据集=[]；
风险值天数=[]；
var计数器=0；
脚本。每个（函数（索引、脚本）{
var json=json.parse（script.innerHTML）；
var数据=[]；
对于（var i=0；i，问题是-我是哑巴

哈哈哈

数据集标签有很多空白…所以我用“”替换了所有的“”，结果显示正确

谢谢大家。
干杯和快乐编程！
两幅图像似乎都不起作用。我将图像链接添加到imgur@SilentCoder。幸运的是，我还不能查看图像。那么，工具提示中的字体是否太大？@SilentCoder，是工具提示容器太大了吗？图例太左了。图例颜色框在画布外（左侧）@ℊααnd刚刚做了，问题仍然存在