我想创建一个柱形图,其中xaxis刻度值是特定的日期值,并希望它们显示为格式化的日期字符串。
"xaxis": { "type: "", "tickformat": "%b %d, %Y"}
,则xaxis刻度值会正确设置格式,但不会显示所有刻度值,甚至不会显示所有准确的数据值。"xaxis": { "nticks": 15}
,则它会显示更多值,但仍会与实际列值相差几天(例如,2019-02-22
会显示为“ Feb 24,2019”)"xaxis": { "type: "category", "tickformat": "%b %d, %Y"}
,则每个xaxis刻度值都会出现并带有正确的值,但它们没有格式是否可以显示所有实际的xaxis值并以格式显示它们?
CodePen:https://codepen.io/proto/pen/NEKQBo
var chart = {
data: [
{
x: [
"2019-03-15",
"2019-03-08",
"2019-03-01",
"2019-02-22",
"2019-02-15",
"2019-02-08",
"2019-02-01",
"2019-01-25",
"2019-01-18",
"2019-01-11",
"2019-01-04",
"2018-12-28",
"2018-12-21"
],
y: [
522,
544,
642,
597,
568,
638,
473,
461,
590,
536,
532,
470,
508
],
series: false,
name: "TRX",
dataType: "real",
type: "bar"
}
],
layout: {
barmode: "",
xaxis: {
title: { text: "Week ending", font: { family: "", size: "", color: "" } },
autorange: true,
tickformat: "%b %d, %Y",
tickangle: 270,
type: "",
tickmode: ""
},
yaxis: {
title: "",
autorange: true,
range: [0, 6763.1394854344835],
ntick: 10,
type: "linear"
},
legend: { orientation: "h", yanchor: "bottom", xanchor: "right", x: 1, y: 1 },
margin: { t: 20, b: 150, l: 100, r: 20 },
fields: {
WEEK: { x: true, y: false, series: false, name: "WEEK", dataType: "date" },
TRX: { x: false, y: true, series: false, name: "TRX", dataType: "real" },
NRX: { x: false, y: false, series: false, name: "NRX", dataType: "real" }
},
type: "col",
layout: { barmode: "" },
width: 540,
height: 370
},
config: {
displayModeBar: false,
sehowSendToCloud: false,
modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
}
};