Как выровнять диаграмму JS "Легенда" по правому центру - PullRequest
Новая
       44

Как выровнять диаграмму JS "Легенда" по правому центру

2 голосов
/ 16 мая 2019

Я использую Chart JS version 2.x. Я подготовил гистограмму с диаграммой JS. Но мне нравится выравнивать legend графика в right center. Ниже я делюсь изображением.

enter image description here

И положение легенды, которое я хочу.

enter image description here

Я пробовал это из документации . В моем коде 

options: {
    legend: { 
        position: 'right' 
    }
}

Обновление 1: Я использую chart js module in Angular5

Обновление 2: То, что я пробовал, это https://jsfiddle.net/v4ur38ao/1/

1 Ответ

1 голос
/ 17 мая 2019

используйте последнюю версию chart.js: https://www.chartjs.org/dist/master/Chart.min.js для получения дополнительной справки проверьте эту документацию и добавьте align:'middle' в вашу легенду, это будет работать 

legend: {
    position: "right",
    align: "middle"
},


var model = {
    type: "bar",
    data: {
        labels: ["APP1", "APP2", "APP3", "APP4", "APP5"],
        datasets: [{
            data: [25, 61, 47, 45, 30],
            label: "Response > 5",
            borderColor: "#5151A1",
            backgroundColor: "#5151A1"
        }, {
            data: [22, 38, 53, 17, 55],
            label: "Response <= 5",
            borderColor: "#408040",
            backgroundColor: "#408040"
        }]
    },
    options: {
        responsive: true,
        legend: {
            position: "right",
            align: "middle"
        },
        scales: {

            yAxes: [{
                ticks: {
                    min: 0,
                    //max: 100,
                    callback: function(value) {
                        return value + "%"
                    }
                },
                scaleLabel: {
                    display: true
                    //labelString: "Percentage"
                }
            }]
        }
    }
}


new Chart(document.getElementById("canvas").getContext("2d"), model);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>

<canvas id="canvas" height="450" width="600"></canvas>

Проверьте обновленную скрипку здесь

Если npm install chart.js не работает, то см. Этот ответ для более подробной информации проверьте документацию на chart.js .

...