我正在使用图表.js创建一个日期时间条形图,根据上次扫描的日期和时间显示多个服务器中的玩家数量。但是,由于某种原因,条形图将无法呈现。如果我使用折线型图表,它呈现得很好。有人知道为什么条形图不会呈现吗?我在开发人员工具中没有任何控制台错误。
小提琴是这样的:
https://jsfiddle.net/j3rmjzpw/2/
超文本标记语言:
<canvas id='playerChartLine' width='800' height='400'></canvas>
<canvas id='playerChartBar' width='800' height='400'></canvas>
Javascript/jQuery:
$( document ).ready(function() {
renderChartJS("line", "playerChartLine", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
renderChartJS("bar", "playerChartBar", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
});
function renderChartJS(chartType, elemId, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax){
var ticksObj = {
suggestedMin: 0,
beginAtZero: true,
stepValue: 50,
}
if(yMax != 0){
ticksObj.max = yMax;
}
if(data.length){
var ctx = document.getElementById(elemId).getContext('2d');
var myChart = new Chart(ctx, {
type: chartType,
data: {
datasets: [{
label: yAxisLabel,
data: data,
borderColor: "rgba(" + rgbaColorStr + ",1)",
backgroundColor: "rgba(" + rgbaColorStr + ",0.5)"
}],
},
options: {
responsive: false,
maintainAspectRatio: true,
scaleBeginAtZero: true,
title:
{
display: true,
text: title
},
scales: {
xAxes: [{
type: "time",
display: true,
scaleLabel: {
display: true,
labelString: xAxisLabel
},
ticks: {
minRotation: 90,
maxRotation: 90,
stepValue: 10,
autoSkip: true,
maxTicksLimit: 50
},
time: {
unit: 'minute',
unitStepSize: 10,
max: data[data.length - 1].x
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: yAxisLabel
},
ticks: ticksObj
}]
}
}
});
}
}
底部图表应为条形图,但未正确呈现。
有人知道发生了什么事吗?
问题是,条形图不支持您提供的数据格式类型。
您应该使用以下类型的数据格式...
renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
在这里,第三个参数用于x轴标签
,第四个参数用于data
这是你的代码的工作版本。。。
$(document).ready(function() {
renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
});
function renderChartJS(chartType, elemId, labels, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax) {
var ticksObj = {
suggestedMin: 0,
beginAtZero: true,
stepValue: 50,
}
if (yMax != 0) {
ticksObj.max = yMax;
}
if (data.length) {
var ctx = document.getElementById(elemId).getContext('2d');
var myChart = new Chart(ctx, {
type: chartType,
data: {
labels: labels,
datasets: [{
label: yAxisLabel,
data: data,
borderColor: "rgba(" + rgbaColorStr + ",1)",
backgroundColor: "rgba(" + rgbaColorStr + ",0.5)"
}],
},
options: {
responsive: false,
maintainAspectRatio: true,
scaleBeginAtZero: true,
title: {
display: true,
text: title
},
scales: {
xAxes: [{
type: "time",
display: true,
scaleLabel: {
display: true,
labelString: xAxisLabel
},
ticks: {
minRotation: 90,
maxRotation: 90,
stepValue: 10,
autoSkip: true,
maxTicksLimit: 50
},
time: {
unit: 'minute',
unitStepSize: 10,
max: data[data.length - 1].x
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: yAxisLabel
},
ticks: ticksObj
}]
}
}
});
}
}
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='playerChartLine' width='800' height='400'></canvas>
<canvas id='playerChartBar' width='800' height='400'></canvas>
我使用chart.js在我的网页上有一个BarChart。 我在其中添加了两个数据点 现在我想要更新那些条A和B,而不是删除它们并再次添加它们(我已经想好了如何做到这一点)。我想让它们垂直移动以适应它们的新值,但我无法找到如何访问图表中已经存在的数据。 没有什么比得上 其中第一个值将是存储数据的索引(F.E.)。 我该怎么做呢?
材质 着色器控制的模型表面外形 光照 光照、阴影控制及环境设置 粒子系统 各种类型粒子特效的创建及使用
我使用的是Chart.js2.6,我已经实现了horizontalLine插件,在条形图上显示平均值。它可以正常工作,但是当工具提示显示在与直线相交的位置时,它部分被水平线本身覆盖。我试图找出如何使工具提示在水平线上方绘制。 我知道工具提示是canvas元素的一部分,因此没有z-index属性。我怎样才能做到这一点? 下面是我使用的水平线插件。 ... 然后我使用以下命令将其添加到条形图选项中 它
以为一面挂了,没想到还是进二面了 无手撕,大概40min,主问项目,图形学和cpp 总体表现自我评价比一面好很多,(一面教训:会的东西如果不能清楚的表达出来就必须认为是没有掌握) ---图形学的部分总体表现还可以 对过程中的知识点做一个简单总结,可能有部分遗漏(并非面试原问题,但囊括了下面的内容): 前向渲染和延迟渲染的对比和各自优劣 PBR流程和理论 阴影贴图技术(级联,立方体阴影贴图的优化和实
线形图,区域图和条形图允许您在 X/Y 轴上绘制数据。 首先,您需要选择定义值轴的 指标 。 指标聚合: Count 计数 聚合返回所选索引模式中元素的原始计数。 Average 该聚合返回数字字段的平均值 。从下拉菜单中选择一个字段。 Sum 总和 聚合返回数字字段的总和。从下拉菜单中选择一个字段。 Min 最小值 聚合返回数字字段的最小值。从下拉菜单中选择一个字段。 Max 最大值 聚合返回数
我刚刚开始使用Chart.js,我很快就变得非常沮丧。我有我的堆叠条形图工作,但是我不能让点击“事件”工作。 我在图表中找到了对GitHub的评论。js声明使用函数<code>getBarsAtEvent 我在画布元素上设置了一个事件监听器(正确的方式): ...然而在我的< code>handleClick函数中,< code > chart . getbarsatevent 是未定义的! 现在