Диаграмма: две биполярные полосы друг под другом - PullRequest
Новая
       8

Диаграмма: две биполярные полосы друг под другом

0 голосов
/ 18 октября 2018

В настоящее время я создаю биполярный Barchart с AngularJs.На данный момент две серии отображаются рядом друг с другом. Вот как это выглядит в настоящее время. Как я могу отображать их друг под другом, чтобы они выглядели как вторая картинка?

Вот как это должно выглядеть. Я использую Chartist.

Это мой component.ts: 

    this.client.get("https://mylink", { observe: "response" })
    .subscribe(data => {
    this.series = data.body["series"];
    this.labels = data.body["labels"];
    console.log(this.labels);
    console.log(this.series);

    var datawebsiteViewsChart = {
        labels: this.labels,
        series: this.series
    };

    var optionswebsiteViewsChart = {
        axisX: {
            showGrid: true
        },
        low: -900,
        high: 800,
        chartPadding: { top: 0, right: 0, bottom: 0, left: 0 }
    };
    var responsiveOptions: any[] = [
        [
            "screen and (max-width: 640px)",
            {
                seriesBarDistance: 5,
                axisX: {
                    labelInterpolationFnc: function (value) {
                        return value[0];
                    }
                }
            }
        ]
    ];
    var websiteViewsChart = new Chartist.Bar(
        "#websiteViewsChart",
        datawebsiteViewsChart,
        optionswebsiteViewsChart,
        responsiveOptions
    );
    //start animation for the Emails Subscription Chart
    this.startAnimationForBarChart(websiteViewsChart);
});

Это HTML-часть. 

<div class="card card-chart">
    <div class="card-header card-header-warning">
        <div class="ct-chart" id="websiteViewsChart"></div>
    </div>
    <div class="card-body">
        <h4 class="card-title">Title</h4>
        <p class="card-category">Subtitle</p>
    </div>
</div>

Какие параметры мне нужно изменить, чтобы мои отрицательные бары отображались непосредственно под положительными, а не рядом с ними?

Большое спасибо взаранее!

РЕДАКТИРОВАТЬ: Теперь это выглядит так

1 Ответ

0 голосов
/ 18 октября 2018

Это похоже на открытый вопрос на Chartist. Github Issue

Я бы порекомендовал использовать другие библиотеки графиков (например, highcharts).

Если вы все еще ищете исправление (пока не будет введена эта функция), янашел обходной путь, выполнив следующие шаги

  1. Сначала сложите отрицательный ряд
  2. Сложите положительные значения отрицательного ряда в следующий
  3. Сложите положительный ряд в следующий

Также вам необходимо установить stackBars на true, чтобы это работало. 

series: [
    [-1, -2, -4, -8, -6, -2, -1, -4, -10, -2],
    [1, 2, 4, 8, 6, 2, 1, 4, 10, 2],
    [5, 20, 5, 5, 21, 12, 22, 3, 20, 2],
   ]
}, {
  stackBars: true,

Рабочий пример

...