Настроить график JS линии сетки - PullRequest
Новая
       36

Настроить график JS линии сетки

0 голосов
/ 02 мая 2018

Я использую chart.js для создания диаграммы. Мне нужно создать свою диаграмму точно так же, как на скриншоте 2. Я многое изменил со своего бокового скриншота 2. Пожалуйста, отметьте

Пожалуйста, проверьте ниже мой код. 

window.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myMixedChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
            responsive: true,
            chartArea: {
                backgroundColor: 'rgba(255,255,255, 0.1)'
            } ,              
            legend: {
                display: false
            } , 
            title: {
                display: true, 
            },
            scales: {
                pointLabels :{
                    fontStyle: "bold",
                },
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 10,
                        stepSize: 1,
                        fontColor : "#FFF",
                        fontSize : 20,
                        fontWeight:1000
                    },
                    gridLines:{
                        color: "#E5E5E5",
                        lineWidth:3,
                        zeroLineColor :"#FFF",
                        zeroLineWidth : 2
                    } 
                }],
                xAxes: [{
                    ticks:{
                        fontColor : "#FFF",
                        fontSize : 20,
                        fontWeight:1000
                    },
                    gridLines:{
                        color: "rgba(255, 255, 255, .1)",
                        lineWidth:10, 
                        drawBorder: false
                    }
                }]
            },
            tooltips: {
                mode: 'index',
                intersect: true
            },

        }
    });      


Chart.pluginService.register({
    beforeDraw: function (chart, easing) {
        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
            var helpers = Chart.helpers;
            var ctx = chart.chart.ctx;
            var chartArea = chart.chartArea;

            ctx.save();
            ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    }
});
...