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

我正在使用Chart JS构建一个实时仪表板。我很好奇是否有办法将条形图的边框改为虚线或虚线？我已经查阅了上的文档，但是我只能找到一个关于虚线的提及，例如borderDash（）。这似乎不适用于条形图边框

我想在条形图上画一个虚线边框，如图中的左侧条形图：

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

组合条形折线图
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
随机化数据
var randomScalingFactor=函数（）{
返回（Math.random（）>0.5？1.0:-1.0）*数学四舍五入（Math.random（）*100）；
};
var randomColorFactor=函数（）{
返回Math.round（Math.random（）*255）；
};
var barChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
类型：'bar'，
标签：“数据集1”，
背景色：“rgba（151187205,0.5）”，
数据：[randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（）]，
边框颜色：“黑色”，
边框宽度：2
}, {
类型：'bar'，
标签：“数据集3”，
背景色：“rgba（2200,0.5）”，
数据：[randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（）]，
边框颜色：“黑色”，
边界宽度：2，
fillText:“测试”
}, ]
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myBar=新图表（ctx{
类型：'bar'，
数据：barChartData，
选项：{
回答：是的，
标题：{
显示：对，
文本：“Chart.js组合条形折线图”
},
比例：{
xAxes：[{
对,，
}],
雅克斯：[{
错误：错误
}]
},
动画：{
onComplete:函数（）{
var ctx=this.chart.ctx；
ctx.textAlign=“中心”；
Chart.helpers.each（this.data.datasets.forEach（function（dataset））函数{
console.log（“打印数据集”+数据集）；
console.log（数据集）；
Chart.helpers.each（dataset.metaData.forEach）（函数（条形图，索引）{
控制台日志（“打印条”+条）；
fillText（dataset.data[index]，bar.\u model.x，bar.\u model.y-10）；
fillText（dataset.data[index]，bar.\u model.x，bar.\u model.y-20）；
})，本页）
})，这个）；
}
}                }
});
};
$（“#随机化数据”）。单击（函数（）{
$.each（barChartData.dataset，函数（i，数据集）{
dataset.backgroundColor='rgba（'+randomColorFactor（）+'，'+randomColorFactor（）+'，'+randomColorFactor（）+'，.7'）；
dataset.data=[randomScalingFactor（）、randomScalingFactor（）、randomScalingFactor（）、randomScalingFactor（）、randomScalingFactor（）、randomScalingFactor（）]；
});
window.myBar.update（）；
});

任何帮助都将不胜感激

---

最佳

我不确定Chart.js库是否支持以下选项：

datasetStrokeStyle:“虚线”

，但您可以将库更新到最新的Chart.js库ChartNew.js，网址：。此更新的库包含许多示例，这些示例将帮助您了解Chart.js的工作原理。您可以使用上面的链接下载zip文件，并找到大量帮助您解决大多数问题的示例文件。在：

---

我知道

datasetStrokeStyle:“虚线”

选项确实可以使用ChartNew.Js库制作虚线边框条形图。我刚刚将该选项粘贴到运行ChartNew.js的应用程序中，并对其进行了测试。我不相信您正在使用的库支持此选项，但请不要让我这么认为

我不确定Chart.js库是否支持以下选项：

datasetStrokeStyle:“虚线”

，但您可以将库更新为最新的Chart.js库ChartNew.js，网址：。此更新的库包含许多示例，这些示例将帮助您了解Chart.js的工作原理。您可以使用上面的链接下载zip文件，并找到大量帮助您解决大多数问题的示例文件。在：

---

我知道

datasetStrokeStyle:“虚线”

选项确实可以使用ChartNew.Js库制作虚线边框条形图。我刚刚将该选项粘贴到运行ChartNew.js的应用程序中，并对其进行了测试。我不相信您正在使用的库支持此选项，但请不要让我这么认为

使用2.x版的库，您可以简单地覆盖组成条形图的矩形的

绘制方法


预览



脚本

...
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
是您的图表对象


Fiddle-
使用2.x版的库，您可以简单地覆盖组成条形图的矩形的
绘制方法


预览



脚本

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

在哪里<