如何使用称为 contex 的 Elixir 库为 y 轴设置固定值？

Question

同学们大家好。

我正在 Elixir 项目中使用 Elixir 库 ContEx 创建图表 - https://hexdocs.pm/contex/Contex.html

我创建了一个条形图。在该图表中，我想将 y 轴的最高刻度值设置为 56。我使用了 tick_positions 来做到这一点。但我的图表看起来很乱。

在此输入图片描述

这是我的图表。我还发现上下文中的范围用于设置范围轴。但我不知道如何在我的代码中做到这一点。那么我应该如何在代码中使用范围来设置 y 轴的范围？

      options = [
        custom_value_scale:
          Contex.ContinuousLogScale.new(
            domain: {0, 56},
            tick_positions: [5, 10, 15, 20, 40, 56],
            negative_numbers: :mask
          ),
          colour_palette: ["ffdfae"],
          data_labels: false,
        ]

即使条形的值小于 56，我也需要 56 出现。

我想知道如何获得 y 轴的静态值。我想要y轴的范围为0到56，我该怎么做？

Answer 1

这是一个渲染此图像的工作 LiveView：

defmodule MyAppWeb.ExampleBarChartLive do
  use Phoenix.LiveView

  alias Contex.BarChart
  alias Contex.ContinuousLinearScale
  alias Contex.Dataset
  alias Contex.Plot

  def mount(_params, _session, socket) do
    socket
    |> make_test_data()
    |> then(&{:ok, &1})
  end

  def render(assigns) do
    ~H"""
    <div>
      <%= plot_test_data(@test_data) %>
    </div>
    """
  end

  def plot_test_data(test_data) do
    custom_value_scale =
      ContinuousLinearScale.new()
      |> ContinuousLinearScale.interval_count(14)
      |> ContinuousLinearScale.domain(0, 56)

    options = [
      mapping: %{category_col: "Category", value_cols: ["Series"]},
      type: :stacked,
      data_labels: true,
      orientation: :vertical,
      select_item: nil,
      custom_value_scale: custom_value_scale,
      default_style: false
    ]

    plot =
      Plot.new(test_data, BarChart, 225, 180, options)
      |> Plot.titles("", "")
      |> Plot.axis_labels("", "")
      |> Plot.plot_options(%{})

    Plot.to_svg(plot)
  end

  defp make_test_data(socket) do
    data = [
      ["Harmony", 15],
      ["Perfection", 15],
      ["Strength", 16],
      ["Wisdom", 15]
    ]

    series_cols = ["Series"]

    test_data = Dataset.new(data, ["Category" | series_cols])

    assign(socket, test_data: test_data)
  end
end

注：

我将

default_style

设置为

false

。

然后我将其添加到我的项目中的

app.css

文件中：

text {
    font-size: 0.5rem;
}