javascript - 在 Plotly.js 中的条之间放置刻度线
问题描述
在 Plotly.js 中是否可以在条之间放置刻度线?在这里,我希望刻度代表连续分布中的切点,而条形代表间隔内的计数。另一种方法是使轴标签范围,例如“5-<10”、“10-<25”、“25-<50”等,但显示中断似乎更清晰。
下面是画笔中显示所需效果的模型,这里我添加了刻度线并通过拖动移动了数字标签。还有一个指向玩具数据的 Codepen 链接:https : //codepen.io/proto /pen/bKGOXg
var chart = {
data: [
{
rowKey: "current",
name: "current",
x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
y: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
values: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
text: [
"1%",
"1%",
"4%",
"3%",
"11%",
"24%",
"22%",
"20%",
"12%",
"1%",
"1%"
],
labels: [
"0.1",
"0.5",
"1",
"2",
"5",
"10",
"25",
"50",
"100",
"250",
"500"
],
type: "bar",
hoverinfo: "x+y",
textposition: "auto",
orientation: "v",
mode: "lines+markers",
marker: { color: null, colors: null },
uid: "2cf1e3"
}
],
layout: {
type: "bar",
orientation: "v",
barmode: "",
showlegend: false,
dataValues: true,
series: { hoverinfo: "x+y" },
legend: {
orientation: "v",
yanchor: "bottom",
xanchor: "right",
traceorder: "normal"
},
titlefont: { size: 12 },
margin: { l: 80, r: 10, t: 140, b: 80 },
xaxis: {
tickangle: 0,
tickfont: { size: 12 },
titlefont: { size: 12, weight: 700 },
type: "category",
title: "scenario",
range: [-0.5, 10.5],
autorange: true
},
yaxis: {
title: "",
type: "linear",
tickformat: ".0%",
hoverformat: ".0%",
range: [0, 0.25477707006369427],
autorange: true
},
width: 500,
height: 360,
},
options: {
displayModeBar: false,
modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
}
};
Plotly.newPlot("myDiv", chart);
解决方案
所以我检查了 plotly 文档,请在此处查看可用的文档
我们在bar
图表对象下有一个名为的属性offset
。Plotly 将此属性描述为。
偏移量(数字或数字数组)
移动绘制条的位置(以位置轴为单位)。在“组”栏模式中,设置“偏移”的轨迹将被排除并以“叠加”模式绘制。
当我将属性设置为 时0.1
,我得到了预期的结果。请查看以下示例,如果这能解决您的问题,请告诉我!
var chart = {
data: [
{
rowKey: "current",
name: "current",
x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
offset: 0.1,
y: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
values: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
text: [
"1%",
"1%",
"4%",
"3%",
"11%",
"24%",
"22%",
"20%",
"12%",
"1%",
"1%"
],
labels: [
"0.1",
"0.5",
"1",
"2",
"5",
"10",
"25",
"50",
"100",
"250",
"500"
],
type: "bar",
hoverinfo: "x+y",
textposition: "auto",
orientation: "v",
mode: "lines+markers",
marker: { color: null, colors: null },
uid: "2cf1e3"
}
],
layout: {
colorway: [
"#3399CC",
"#99BB66",
"#2266AA",
"#FFCC00",
"#888888",
"#FFAA00",
"#800080"
],
color: "purple",
plotlyType: "bar",
type: "bar",
orientation: "v",
barmode: "",
showlegend: false,
dataValues: true,
series: { hoverinfo: "x+y" },
legend: {
orientation: "v",
yanchor: "bottom",
xanchor: "right",
traceorder: "normal"
},
titlefont: { size: 12 },
margin: { l: 80, r: 10, t: 140, b: 80 },
xaxis: {
tickangle: 0,
tickfont: { size: 12 },
titlefont: { size: 12, weight: 700 },
type: "category",
title: "scenario",
range: [-0.5, 10.5],
ticks: "outside",
autorange: true
},
yaxis: {
title: "",
type: "linear",
tickformat: ".0%",
hoverformat: ".0%",
range: [0, 0.25477707006369427],
autorange: true
},
transposeData: false,
showOverall: false,
width: 500,
height: 360,
showLegend: true,
reverse: {},
titles: {},
swapCategoryAndLegend: false
},
options: {
displayModeBar: false,
modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
}
};
Plotly.newPlot("myDiv", chart);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width: 100%; height: 500px;"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
推荐阅读
- docker - 在 Window 的 Ubuntu WSL 上安装 Docker 时遇到问题
- android - 由于 macos big sur 上的内部错误,Android 模拟器关闭
- kubernetes - no_proxy 在 K8S 上不起作用 - Docker 映像 - YAML
- css - 将“最小内容”转换为像素
- mysql - 为什么我在此重划查询中收到“缺少参数”的错误消息?
- tensorflow - TypeError:层的输入应该是张量。得到:
我正在尝试使用 tf 数据管道从几个文件中读取数据并训练多输入神经网络。我成功地训练了模型,但是当我想测试模型时,我得到了这个错误:
TypeError: Inputs to a layer should be tensors. Got: <PrefetchDataset shapes: (((None, None),
- laravel - 发布视图计数不会在 laravel 上增加
- python - (Python)如何从字符串中提取数字(没有正则表达式)?
- c# - Autofac RegisterAssemblyTypes 和 RegisterType 在指定 SingleInstance 时两次实例化相同的实现
- javascript - 新添加的 dom 按钮 type="button" 仍然触发提交