admin管理员组

文章数量:1323157

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 / 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=".1.3/jquery.min.js"></script>
<script type="text/javascript" src=".js/2.0.2/Chart.bundle.js"></script>
<script type="text/javascript" src=".js/2.0.2/Chart.bundle.min.js"></script>
<script type="text/javascript" src=".js/2.0.2/Chart.js"></script>
<script type="text/javascript" src=".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

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/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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.0.2/Chart.bundle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.0.2/Chart.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.0.2/Chart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./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

Share asked May 5, 2016 at 15:37 user3878014user3878014 2752 gold badges4 silver badges8 bronze badges 1
  • A solution for Chart.js v3 is available here: stackoverflow./a/72424830/2358409 – uminder Commented May 29, 2022 at 15:19
Add a ment  | 

2 Answers 2

Reset to default 5

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


Preview


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/Ls8u10dp/

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./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./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.

本文标签: javascriptChange Chart JS Bar Chart Border to Dotted LineStack Overflow