Question

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

我有3个问题：

1 - 它显示了正确的数据，但我的图例有问题，因为它们看起来与画布外的颜色框左对齐，每行一个，如下图所示（https://i.stack.imgur.com/c9qBe.png ）。

我想在css中使用float: left;这样的传说。

2 - 其他问题是工具提示，它们非常大......如下图所示。（https://i.stack.imgur.com/txXCF.png）

我试图找到实现这一目标的选项，但我很难让它发挥作用。

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

Bellow是用于创建图表的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);

不要介意'##'选择器，我正在使用CFusion。你们有什么帮助吗？

- DISCLAIMER-- 我设法设置stepSize: 1所以间隔是1.但仍然有问题（1）和（2）

提前致谢！快乐编程！

Answer 1

问题是这个 - 我愚蠢 ..

哈哈哈

数据集标签有很多空白......所以我只是替换了所有＆＃34; ＆＃34; by＆＃34;＆＃34;它显示正确..

感谢大家。干杯和快乐的节目！

ChartJS - 图例和工具提示选项

1 个答案: