Как по-разному установить стиль для данных легенды для набора данных с помощью Chart.js? - PullRequest
Новая
       23

Как по-разному установить стиль для данных легенды для набора данных с помощью Chart.js?

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

Я создал диаграмму с помощью Chart.js, и теперь мне нужно по-разному отображать данные в легенде для двух разных наборов данных.

Как отобразить первый набор данных «Low / High Range Limit» в классическом стиле прямоугольника / заливки и набор данных «Patient Results» в стиле точки?

(Бонус: в настоящее время я показываю второй набор данных почти правильно. Я также хочу полностью закрасить круг сплошным «стальным синим» цветом, а не прозрачностью.)

(Я хотел бы предоставить изображение, но мне нужно по крайней мере 10 репутации, чтобы опубликовать их.) 

<style>
.chart-container { width: 550px }
</style>

<div class="chart-container">
<canvas id="myChart" width="2" height="1"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var context = document.getElementById('myChart');
var myChart = new Chart(context, {
    type: 'line',
    data: {
        labels: ['(A)', '(B)', '(C)', '(D)'],
        datasets: [
            {
                label: 'Patient Results',
                data: [40, 230, 30, 60],
                borderColor: 'steelblue',
                borderWidth: 2,
                pointBackgroundColor: 'steelblue',
                fill: false,
                spanGaps: true // if true, lines will be drawn between points with no or null data. if false, points with NaN data will create a break in the line.
            },
            {
                data: [0, 30, 20, 20], // representing the low range only
                borderColor: '#222',
                borderWidth: 2,
                pointRadius: 0,
                fill: true,
                backgroundColor: '#fff'
            },
            {
                label: 'Low/High Range Limit',
                data: [60, 150, 50, 40], // representing the high range only
                borderColor: '#222',
                borderWidth: 2,
                pointRadius: 0,
                fill: true,
                backgroundColor: '#c2e8f5'
            }
        ]
    },
    options: {
        elements: {
            line: {
                tension: 0 // disables bezier curves
            }
        },
        legend: {
            labels: {
                boxWidth: 6,
                filter: function(legendItem, chartData) {
                    if (legendItem.datasetIndex === 1) {
                        return false;
                    }
                    return true;
                },
                usePointStyle: true
            },
            position: 'right',
            reverse: true // shows 'Low/High Range Limit' first
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
...