将 Chart JS 条形图边框更改为虚线

Question

将 Chart JS 条形图边框更改为虚线

use*_*014 0 javascript charts plot chart.js

我正在使用 Chart JS 构建实时仪表板。我很好奇是否有办法将条形图的边框更改为虚线或虚线？我已经浏览了http://www.chartjs.org/docs/上的文档，但我只能找到关于线图的虚线的提及，例如 borderDash()。这似乎不适用于条形图边框。

我想要条形图上的虚线边框，例如在此图像的左侧条形图中：在此处输入图像描述

生成上面的图（右侧）的虚拟代码：

<!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>

Run Code Online (Sandbox Code Playgroud)

任何帮助将不胜感激！

最好的事物

Answer 1

pot*_*ngs 5

使用库的 2.x 版，您可以简单地覆盖draw构成条形的矩形的方法

预览

脚本

...
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);

Run Code Online (Sandbox Code Playgroud)

myChart你的图表对象在哪里。

小提琴 - http://jsfiddle.net/Ls8u10dp/

归档时间：	9 年，5 月前
查看次数：	8478 次
最近记录：	9 年，5 月前