Change Chart JS Bar Chart Border to Dotted Line

2019-09-09 23:16发布

站内问答 / JavaScript
1616 2 4

I'm using Chart JS to build out a live dashboard. I was curious if there is a way to change the border of a bar chart to be dashed or dotted? I've looked through the documentation on http://www.chartjs.org/docs/ but I could only find a mention of dashed lines for Line Plots such as borderDash(). This doesn't seem to apply to bar chart borders.

I would like a dashed border on the bar such as in the left bar chart in this image: enter image description here

The dummy code that produces the plot (on the right) above:

<!doctype html>
<html>

<head>
<title>Combo Bar-Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.bundle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script>


<style>
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
</style>
</head>

<body>
<div style="width: 75%">
    <canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<script>
    var randomScalingFactor = function() {
        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    };
    var randomColorFactor = function() {
        return Math.round(Math.random() * 255);
    };
    var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            type: 'bar',
            label: 'Dataset 1',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            borderColor: 'black',
            borderWidth: 2
        }, {
            type: 'bar',
            label: 'Dataset 3',
            backgroundColor: "rgba(220,220,220,0.5)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            borderColor: 'black',
            borderWidth: 2,
            fillText: 'test'
        }, ]
    };
    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Combo Bar Line Chart'
                },
                 scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: false
                    }]
                },
                animation: {
                    onComplete: function () {
                        var ctx = this.chart.ctx;
                        ctx.textAlign = "center";
                        Chart.helpers.each(this.data.datasets.forEach(function (dataset) {
                            console.log("printing dataset" + dataset);
                            console.log(dataset);
                            Chart.helpers.each(dataset.metaData.forEach(function (bar, index) {
                                console.log("printing bar" + bar);
                                ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 10);
                                ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 20);
                                }),this)
                                }),this);
                    }
                }                }
        });
    };
    $('#randomizeData').click(function() {
        $.each(barChartData.datasets, function(i, dataset) {
            dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
            dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
        });
        window.myBar.update();
    });
</script>

Any help would be greatly appreciated!

Best

2条回答
三岁会撩人
2楼-- · 2019-09-09 23:26

I am not sure if the Chart.js library supports the option: datasetStrokeStyle: "dashed",, but you can update your library to the latest Chart.js library, ChartNew.js at : https://github.com/FVANCOP/ChartNew.js/ . This updated library has many included examples that will help you understand how Chart.js works. You can download the zip file using the link above and find tons great example files that will help you figure out most issues. There is also some pretty good documentation at: https://github.com/FVANCOP/ChartNew.js/wiki/100.Available_options .

I know that the datasetStrokeStyle: "dashed" option works to make dashed border bar charts using the ChartNew.Js library for sure though. I just pasted the option into an app running ChartNew.js and tested it. I don't believe the library you are using supports this option, but don't hold me to that.

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
3楼-- · 2019-09-09 23:38

With version 2.x of the library you can simply override the draw method of the rectangles that make up the bars

Preview

enter image description here

Script

...
Chart.helpers.each(myChart.getDatasetMeta(0).data, function (rectangle, index) {
    rectangle.draw = function () {
        myChart.chart.ctx.setLineDash([10, 10]);
        Chart.elements.Rectangle.prototype.draw.apply(this, arguments);
    }
}, null);

where myChart is your chart object.

Fiddle - http://jsfiddle.net/Ls8u10dp/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)