Question

我正在使用Chart JS来构建实时仪表板。我很好奇是否有办法将条形图的边框改为虚线或点缀？我查看了http://www.chartjs.org/docs/上的文档，但我只能找到Line Plots的虚线，例如borderDash（）。这似乎不适用于条形图边框。

我想在条形图上显示虚线边框，例如此图片中的左侧条形图： enter image description here

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

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

任何帮助将不胜感激！

最佳

Answer 1

使用库的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);

其中myChart是您的图表对象。

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

Answer 2

我不确定Chart.js库是否支持选项：datasetStrokeStyle: "dashed",，但您可以将库更新到最新的Chart.js库ChartNew.js：https://github.com/FVANCOP/ChartNew.js/。此更新的库包含许多示例，可帮助您了解Chart.js的工作原理。您可以使用上面的链接下载zip文件，找到可以帮助您找出大多数问题的大量示例文件。还有一些非常好的文档：https://github.com/FVANCOP/ChartNew.js/wiki/100.Available_options。

我知道datasetStrokeStyle: "dashed"选项可以使用ChartNew.Js库来制作虚线边框条形图。我只是将选项粘贴到运行ChartNew.js的应用程序中并进行了测试。我不相信你使用的图书馆支持这个选项，但不要指责我。

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

2 个答案: