获取Plotly.js以显示具有正确值和格式的轴刻度值

时间:2019-04-04 04:18:26

标签: formatting bar-chart plotly plotly.js

我想创建一个柱形图,其中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

enter image description here

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"]
    }
};

https://codepen.io/proto/pen/NEKQBo

0 个答案:

没有答案