Блог

Я хочу отобразить несколько точек рассеяния на правом краю полос и успешно сделал это, как показано на рисунке 1 ниже.

Но когда для построения гистограммы требуется только одна длина данных, полоса исчезает или становится очень тонкой, так что видны только точки рассеяния, как показано на рисунке 2 ниже.

Затем я отключил трассировку рассеяния, и полосы стали видны, как показано на рисунке 3 ниже.

Ниже приведены сценарии для создания этих графиков.

     let initial = new Date("2020-11-08T00:00:00.000Z");
    let final = new Date("2020-12-08T00:00:00.000Z");
    let half = new Date((initial.getTime()   final.getTime())/2);

    Plotly.newPlot(
        testplot, {
            data: [
                { y: [1000], x: [half], type: 'bar', offsetgroup: 0},
                { y: [1000], x: [half], type: 'bar', offsetgroup: 1},
                { y: [250], x: [final]},
            ], layout: { title: 'single bar', bargap: 0}, config: { responsive: true },
        }
    );

    let t0 = initial, t1 = half, t2 = final;
    let h0 = new Date((t0.getTime()   t1.getTime())/2);
    let h1 = new Date((t1.getTime()   t2.getTime())/2);

    Plotly.newPlot(
        testplot2, {
            data: [
                { y: [500, 750], base: [0, 250], x: [h0, h1], type: 'bar', offsetgroup: 0},
                { y: [500, 750], base: [0, 250], x: [h0, h1], type: 'bar', offsetgroup: 1},
                { y: [200, 800], x: [half, final]}
            ], layout: { title: 'more than one bar', bargap: 0 }, config: { responsive: true }
        }
    )
 

Прямо сейчас мне нужно самому вычислить среднюю точку даты, чтобы я мог смещать столбики влево, чтобы точки появлялись на правом краю столбиков. Если я использую даты по умолчанию для построения графиков и точек, точки будут размещены в центре столбцов, но полоса на «одной полосе» не исчезла, как показано на рисунке 4 ниже.

У меня нет проблем, когда длина данных больше единицы, но когда длина равна единице; есть ли какой-нибудь способ сделать так, чтобы полосы заполняли холст, а точка оставалась на правом краю? или как сместить точки вправо?