条形图(图表.js)中的附加线条
Additional line in BarChart (Charts.js)
我正在尝试通过以下代码生成的条形图添加一条水平线(例如计算的平均值)。有没有办法用另一个画布覆盖该条形图?还是我必须更改"图表.js"文件才能获得这样的线条?如果这是必要的,必须改变什么?
<!doctype html>
<html>
<head>
<script src="Chart.js"></script>
</head>
<body>
<center>
<h2>
<u>Statistik</u>
</h2>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var jan = 12
var feb = 23;
var mar = 11;
var apr = 65;
var mai = 33;
var jun = 1;
var jul = 23;
var aug = 0;
var sep =0;
var okt = 0;
var nov =0;
var dec = 0;
var barChartData = {
labels : ["Januar","Februar","März","April","Mai","Juni","Juli", "August", "September", "Oktober", "November", "Dezember"],
datasets : [
{
label : "2014",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [12,0,0,0,0,0,0,0,0,0,0,0]
},
{
label : "2015",
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [jan,feb,mar,apr,mai,jun,jul,aug,sep,okt,nov,dec]
}]
}
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Bar(barChartData, {
responsive : true
});
</script>
</body>
</html>
感谢您的帮助!
亲切问候冯吉索
我创建了一个叫做叠加图的东西,我已将其添加到我的图表分支中.js (https://github.com/leighquince/Chart.js),可以在这种情况下使用。 它的工作方式与折线图或条形图相同,唯一的区别是您声明了一个名为 type
的额外属性,该属性可以是'line'
的,也可以是'bar'
的。然后打电话new Chart(ctx).Overlay(data)
更新:现在还添加到分叉中,可以选择传递一个名为堆叠overlayBars
的选项(将名称从堆叠更改为堆叠,因为它正在做的事情有点误导),该选项将相互叠加条形图。
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
//new option, barline will default to bar as that what is used to create the scale
type: "line",
fillColor: "rgba(120,120,120,0.2)",
strokeColor: "rgba(120,120,120,1)",
pointColor: "rgba(120,120,120,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 4, 81, 56, 55, 40]
}, {
label: "My First dataset",
//new option, barline will default to bar as that what is used to create the scale
type: "bar",
fillColor: "rgba(220,20,220,1)",
strokeColor: "rgba(220,20,220,1)",
pointColor: "rgba(220,20,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [32, 25, 33, 88, 12, 92, 33]
}, {
label: "My Second dataset",
//new option, barline will default to bar as that what is used to create the scale
type: "bar",
fillColor: "rgba(30,30,130,1)",
strokeColor: "rgba(30,30,130,1)",
pointColor: "rgba(30,30,130,1)",
pointStrokeColor: "#fff",
data: [13, 29, 22, 44, 34, 77, 10]
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Overlay(data, {
responsive: false,
overlayBars: true,
datasetFill: false,
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.quincewebdesign.com/cdn/Chart.js"></script>
<canvas id="canvas" width="400"></canvas>
相关文章:
- 正在等待呈现图表,直到加载数据为止
- 使用CSS在页面加载时从中心向外扩展线条
- ajax加载()后,包含图表的图像不会重新绘制
- 如何根据点击按钮重新加载我的谷歌图表
- 构建多个图表时,HighCharts加载数据的速度较慢
- 如何使用输入数据加载新的extjs图表
- ng高图表的响应行为,加载时隐藏编译的ng点击xAxis标签
- 我想在每个按钮点击事件上加载多个图表.我使用了下面的谷歌代码
- PHP 图表 js 加载 mysql 和接口
- 加载图表时出错 未捕获的类型错误:无法读取未定义的属性“到小写”
- 首次加载图表时的谷歌可视化动画
- 加载图表时显示旋转图像
- 在页面上加载图表
- 谷歌Vis和闪亮的加载图表
- 加载图表连接到mysql没有刷新页面使用php和javascript
- 通过Angular ngRoute加载图表不起作用
- 从使用ajax调用获取的数据加载图表
- d3.js -重新加载图表
- 加载图表后高库存变化 xAxis 最小范围
- nvd3在重新加载图表后的stateChange(单击图例时)上传递错误事件