个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
气泡图中的 y 轴是否可以有类别刻度？我正在尝试创建一个气泡图，其中 y 轴 -> 一周中的天数和 x 轴 -> 时间采用“hh:mm a”格式。 (只是因为 Chart.js 只允许在 x 轴上设置时间刻度)。请建议我如何更改此问题，以便对更多人更有帮助。
<body><canvas id="bubble" width="400" height="400"></canvas></body>
<script>
$(function() {
Chart.defaults.global.defaultFontColor = '#fff'
var bubbleBackgroundColor = function() {
return 'rgba(255, 206, 86, 0.2)'
};
var bubbleBorderColor = function() {
return 'rgba(255, 206, 86, 1)'
};
var bubbleChartData = {
animation: {
duration: 10000
},
// Documentation says the tick values tick.min & tick.max must be in the Labels array. So thats what I have below
labels: ["Mon", "Tue", "wed", "Thu"],
datasets: [{
label: "Requests and bookings",
fill: false,
lineTension: 0.1,
backgroundColor: bubbleBackgroundColor(),
borderColor: bubbleBorderColor(),
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(153, 102, 155, 0.2)",
pointHoverBorderColor: "rgba(153, 102, 155, 1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
// how would the data change ...how can the numbers for y be replaced with strings
data:[{x: 2,y: 0,r: 15},{x: 3,y: 1,r: 19}, {x: 5,y: 2,r: 15}, {x: 4, y: 3,r: 18}]
}]
};
var ctx = document.getElementById('bubble');
var bubble = new Chart(ctx, {
type: 'bubble',
data: bubbleChartData,
options: {
responsive: true,
title: {
display: true,
text:'Weekly activity'
},
options: {
scales: {
yAxes: [{
// will this create y-axis with days of week?
type: 'Category',
position: 'bottom',
ticks: {
ticks.min: "Mon",
ticks.max: "Thu"
}
}],
xAxes: [{
type: 'time',
time: {
displayFormats: {
minute: 'hh:mm a'
}
}
}]
}
}
}
});
});
</script>
最佳答案
这在 ChartJS 中是可能的，一旦修复了几个问题，就可以使用给定的代码:
改变这个
options: {
responsive: true,
title: {
display: true,
text:'Weekly activity'
},
options: {
scales: {
yAxes: [{
// will this create y-axis with days of week?
type: 'Category',
position: 'bottom',
ticks: {
ticks.min: "Mon",
ticks.max: "Thu"
}
}],
xAxes: [{
type: 'time',
time: {
displayFormats: {
minute: 'hh:mm a'
}
}
}]
}
}
}
为此(通过删除多余的 options block )
options: {
responsive: true,
title: {
display: true,
text:'Weekly activity'
},
scales: {
yAxes: [{
// will this create y-axis with days of week?
type: 'Category',
position: 'bottom',
ticks: {
ticks.min: "Mon",
ticks.max: "Thu"
}
}],
xAxes: [{
type: 'time',
time: {
displayFormats: {
minute: 'hh:mm a'
}
}
}]
}
}
解决了这个问题。
x 轴的刻度类型为 Category，无法识别 ChartJS scale type只是因为大写字母。将类型重命名为其小写伙伴 category，使其能够被 ChartJS 识别。
勾选选项设置不正确，而且属性名称无效，这会导致 ChartJS 无法运行。
Documentation says the tick values tick.min & tick.max must be in the Labels array.
到目前为止，ticks.min 和 ticks.max 对于类别尺度来说是可选的。但是，如果您想继续使用 ticks.min 和 ticks.max，您可以这样做:
改变
ticks: {
ticks.min: "Mon",
ticks.max: "Thu"
}
至
ticks: {
min: "Mon",
max: "Thu"
}
虽然没有官方文档中那样清楚，但这就是指定选项 ticks.min 和 ticks.max 时的含义- 我们现在可以通过 ticks.min 访问我们的设置，而不是之前的 ticks.ticks.min。
类别轴设置的标签当前影响所有轴，而不仅仅是 y(类别)轴。我们可以通过设置yLabels而不是labels来解决这个问题，如 shown in the documentation .改变
labels: ["Mon", "Tue", "wed", "Thu"],
至
yLabels: ["Mon", "Tue", "wed", "Thu"],
改变
type: 'category',
position: 'bottom',
ticks: {
至
type: 'category',
position: 'left',
ticks: {
现在看起来像这样:
我们现在有了一个可用的气泡图! y 轴显示星期几，x 轴显示格式为“hh:mm a”的时间值。这是完成的代码笔示例:http://codepen.io/albinodrought/pen/VmNwoj
<小时/>针对这种图表方式的推理，
(only because Chart.js allows timescale only on the x axis)
似乎还有在 y 轴上绘制时间刻度值的解决方法:ChartJS issue #2791
主要是将数据点的 y 值设置为时间格式值(纪元)，然后更改 y 轴的回调以格式化这些值。请参阅ChartJS docs for setting tick callbacks .
关于chart.js - Chartjs 气泡图中 Y 轴上的类别刻度和 x 轴上的时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38181412/
25
4
0
我有一个通过 Google Charts Org Chart API 呈现的图表。当用户单击节点时，如何获取有关所选节点的数据。我理解到我进行“getSelection”调用以将选择信息输出到 Jav
我使用Chart.js显示雷达图。我的问题是某些标签很长: 图表无法显示或显得很小。 那么，有没有办法换行或为标签分配最大宽度？ 感谢您的帮助! 最佳答案 对于Chart.js 2.0+，您可以使用数
我想问一下使用Chart.js http://www.chartjs.org/ 可以吗？获得组合条形图和折线图？ 感谢您的任何建议。 最佳答案 下面的答案与chart.js 1.x有关。 Chart.
我在addData和removeData函数中添加了chart.resize()，但它总是增加高度并且永远不会减少! 当用户单击菜单项时，我正在更新图表。有些项目有超过 100 个数据，有些项目只有
horizontal bar chart var barOptions_stacked1 = { tooltips: { e
我们将 Chart.js 与 clojurescript 和 Reagent 一起使用。现在我知道 Chart.js 有一个 Chart.update() 方法来用新数据更新图表。所以问题是，如何设置
我想显示一个包含多个数据集的条形图，如下所示，。。我可以获取如下所示的数据。。而是如何转换这个JSON数组，如下所示。我需要显示过去7天每个班次的出勤百分比。。感谢你在这方面的帮助。谢谢!。=编辑=
I want to display a bar chart with multiple datasets as shown below,我想显示一个包含多个数据集的条形图，如下所示， I'
假设我有一个 Charting.Chart : 我想导出到 Excel.Workbook.Worksheet以便我稍后可以“播放”数据(例如在 Excel 图表上拖放更多数据等): 请不要介意第二张图
离子性： ionic（Ionic CLI）：4.10.3（/Users/faiz/.nvm/versions/node/v8.9.4/lib/node_modules/ionic） 离子框架：离子角3
我正在使用Chart.js来可视化我的数据，如下图所示。。。我想在图表中间加一张照片。。。如何在甜甜圈图表的中间添加照片？下面是我的javascript代码：
我正在使用 Kendo 饼图，我想将其配置为在没有数据可显示时显示一条消息。我正在使用以下 js 函数配置饼图 - 变量“JsPieChartDataSet”是一组 JSON 格式的数据。 是否有可以
是否可以在图表和x轴之间获得更多空间？ 是否可以在图表的右侧和 Canvas 区域的末端之间留出更多的空间？我想在图表旁边的 Canvas 中添加更多元素，但是这是不可能的，因为图表占用了整个 Can
我正在使用chart.js，在图表的某些点的多日条目之间缺少一些数据。我已将这些值分配为null，但希望图表在缺失点之间绘制一条连接线。这是我所拥有的： 有没有办法将chart.js中的点连接起来？也
我正在生成一些谷歌图表，但我被困在这里。 Google 允许您将列堆叠起来。但它要么受到限制，要么我无法将其配置为工作。取自谷歌，这里有一个例子，显示了两个国家每年生产的咖啡杯数: 假设我有另一个相同
使用 Google Charts 条形图，是否可以更改一个条形的颜色。例如，我想将 2006 年的数据设为红色(其他条形为蓝色)。 function drawVisualization() {
我目前正在尝试重新设计设计布局。我通过尝试和错误得到了大部分。我唯一不明白的部分是: 1.) 左侧和底部的黑色轴。所以只有那些是黑色的2.) 里面的浅灰色轴。如何在颜色上应用不透明度或使用我自己的颜色
我使用以下命令创建了一个名为“abc”的 Helm 图表helm create abc现在，当我安装此图表时，所有创建的kuberenets资源将具有一个包含“abc”的名称。 现在，我必须将图表“a
我正在构建一个折线图，除了 ChartScrollbar 中的标签之外，一切正常，因为类别名称有点长，cahrtScrollbar 中的标签相互堆叠使其无法读取。我想知道是否可以隐藏标签、仅显示一些标
我正在使用 Chart.js 2.5。我的情况是，我有一个包含 40 个数据的数据集，但我只想在折线图中显示 7 个数据，但仍然可以水平向左/向右移动以发现其余数据。 我尝试了ticks.maxTic
我是一名优秀的程序员,十分优秀！