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

【问题标题】：Change Chart JS Bar Chart Border to Dotted Line将图表 JS 条形图边框更改为虚线
【发布时间】：2016-05-05 15:37:24
【问题描述】：

我正在使用 Chart JS 构建实时仪表板。我很好奇是否有办法将条形图的边框更改为虚线或点线？我已经查看了http://www.chartjs.org/docs/ 上的文档，但我只能找到关于线图的虚线的提及，例如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>

任何帮助将不胜感激！

最好的

【问题讨论】：

标签： javascript plot charts chart.js

【解决方案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/

【讨论】：

这太棒了！非常感谢！如果我有两个数据集，而我只希望其中一个被虚线呢？
我认为代码就是这样做的——注意 getDatasetMeta(0)。如果您希望第二个被破折号，请将 0 更改为 1。
不起作用。如果将其更改为 1，则第一个和第二个数据集都会有一条虚线

【解决方案2】：

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

我知道datasetStrokeStyle: "dashed" 选项确实可以使用 ChartNew.Js 库制作虚线边框条形图。我只是将选项粘贴到运行 ChartNew.js 的应用程序中并对其进行了测试。我不相信您使用的库支持此选项，但不要让我这样做。

【讨论】：