折线图显示在 chartjs 中 combochart 的条形下
我正在使用组合图和图表。js在我的网站上。
PFB我用的代码。
var PCTCtx=document.getElementById（"pctdiv"）. getContext（"2d"）；
PCTChart = new Chart(PCTCtx, {
type: 'bar',
data: {
datasets: [{
label: 'Bar Dataset',
data: [100, 70, 60, 40],
backgroundColor: ['red', 'red', 'red', 'red']
}, {
label: 'Line Dataset',
data: [50, 50, 50, 50],
fill: false,
backgroundColor: ['#000000', '#000000', '#000000', '#000000'],
// Changes this dataset to become a line
type: 'line'
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
}],
xAxes: [{
barThickness: 35,
gridLines: {
display: false
}
}]
}
}
});
PCTChart.data.datasets[1].borderColor = '#000000';
PCTChart.update();
我需要在条形图上显示的线。
我在这里为相同的内容创建了一个jsfiddle
任何帮助都是可观的。
共有3个答案
我们可以使用order来克服这个问题。
label: 'Schedule',
data: [...lineData],
borderColor: '#9630D6',
backgroundColor: '#fff',
type: 'line',
order: 0,
},
{
label: 'bar 1st',
data: [...barData1],
backgroundColor: '#97CEA5',
barThickness: 40,
order: 1,
},
{
label: 'bar 2nd',
data: [...barData2],
backgroundColor: '#E2BB72',
barThickness: 40,
order: 2,
},
{
label: 'bar 3rd',
data: [...barData3],
backgroundColor: '#E2E28F',
barThickness: 40,
order: 3,
}
我自己找到了解决方案。
实际上，我们需要将线条数据放在数据集中条形数据的上方。chart.js按照在数据集中找到chartdata的顺序从上到下创建图表。
所以我把下面的代码改成了
var PCTCtx = document.getElementById("pctdiv").getContext("2d");
PCTChart = new Chart(PCTCtx, {
type: 'bar',
data: {
datasets: [{
label: 'Line Dataset',
data: [50, 50, 50, 50],
fill: false,
backgroundColor: ['#000000', '#000000', '#000000', '#000000'],
// Changes this dataset to become a line
type: 'line'
},{
label: 'Bar Dataset',
data: [100, 70, 60, 40],
backgroundColor: ['red', 'red', 'red', 'red']
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
}],
xAxes: [{
barThickness: 35,
gridLines: {
display: false
}
}]
}
}
});
PCTChart.data.datasets[1].borderColor = '#000000';
这对我很管用谢谢
我面临着同样的问题。我在数据集中找到了一个选项“订单”。https://www.chartjs.org/docs/latest/charts/mixed.html
-
在一个html页面中，我有一个选择菜单（a， b， c， d）和一个条形图（a， b， c， d）。我想做的是在选择菜单中选择的条形图中突出显示相应的条形图。
-
我试图创建一个堆叠条形图与chartjs。我有时间差异的时间序列，这意味着一些序列可以在一段时间内有价值，但其他序列没有价值。出于这个原因，我选择直接将x值包含在数据集中，而不是作为标签数组，但是图表不能正确渲染。 这是我的代码： 我认为问题在于x轴堆叠。 这里有一个JSFiddle来说明这个问题。 https://jsfiddle.net/1kLyyjfp/
-
我有一个使用chart.js创建的条形图。页面加载时一切正常，但当我使用daterangepicker更改时间范围时，出现了一个小故障。新数据被引入，但当我将鼠标悬停在上面时，旧数据会显示出来。我是javascript新手，希望能得到一些帮助。看起来我需要合并。销毁（）；不知怎么的，但我不知道怎么做。下面是我的代码片段： 破坏原始数据的最佳方法是什么，以便当我更改日期范围并将鼠标悬停在新图表上时，
-
我有以下不同月份的数据 一月：[1,5,3] Feb：[10,5] 三月：[4,8] 四月：[7] 可能：[3,1,5,0,7] 我想生成如下所示的条形图 现在，我有以下代码，我想知道如何生成如上图所示的条形图。 }); 非常感谢。
-
使用chart.js的示例折线图代码(http://www.chartjs.org/docs/#line-图表示例用法），我能够在js fiddle或独立页面上创建一个完美的折线图。 问题是，当将完全相同的配置代码插入到我的项目中并转换为自定义敲除绑定时，不会显示应位于图表左边缘和下边缘的数据标签。除此之外，它看起来和样品完全一样，就像它应该的那样。 我的代码太复杂，无法包含在这里，所以我要寻找的
-
我有一个这样的数据帧： 现在，我想绘制水平条形图，其中平台名称位于相应的条形图中，使其看起来像这样： 我该怎么做？