Диаграмма JS цветной прямоугольник в метке оси - PullRequest
Новая
       34

Диаграмма JS цветной прямоугольник в метке оси

0 голосов
/ 16 июня 2020

Я пытаюсь создать линейную диаграмму с диаграммой JS, где цветные прямоугольники, которые обычно можно найти в легенде, расположены прямо перед меткой оси. Есть ли способ создать там цветной прямоугольник или самостоятельно перемещать «части» легенды? Я не хочу иметь ярлыки И легенду ... Любые предложения, помощь приветствуется. 

                var canvas = document.getElementById("load");
            var loadChart = new Chart(canvas, {
                type: "line",
                data: {
                  labels: ["X"],
                  "datasets": [{
                    "label": "valueLegendY1",
                    "fill": "false",
                    "borderColor": "#98bbcc",
                    "backgroundColor": "rgba(238,59,59,0.0)",
                    yAxisID: "y-axis-1",
                    "data": []
                  },{
                    "label": "valueLegendY2",
                    "fill": "false",
                    "borderColor": "#d9edf7",
                    "backgroundColor": "rgba(238,59,59,0.0)",
                    yAxisID: "y-axis-2",
                    "data": []}
                    ]
                },
                options: {
                    scales: {
                        ticks: {beginAtZero: true},
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }, 
                            scaleLabel: {
                                display: true,
                                labelString: 'valueLabelY1'
                            },
                            id: "y-axis-1"
                        },{
                            ticks: {
                                beginAtZero: true
                            }, 
                            scaleLabel: {
                                display: true,
                                labelString: 'valueLabelY2'
                            },
                              id: "y-axis-2",
                              position: "right",
                              gridLines : {
                                  display : false
                              }
                        }],
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'time',
                            },
                            ticks: {maxTicksLimit: 30}
                        }]
                    },
                    responsive: false,
                    maintainAspectRatio: false,
                    animation: {
                        duration: 0
                    },
                    legend: {
                        display: true,
                       labels: {
                            boxWidth: 50,
                            fill: true
                       }
                    }
                }
              });

Ось должна выглядеть примерно как это

...