How to display segmented linear progress bar?

Title

Description

How can I display a segmented linear progress bar like the one shown in the image below?

Solution

In VChart, you can use extension marks to display the dividing lines between each segment.

Code Example

const spec = {
  type: "linearProgress",
  data: [
    {
      id: "id0",
      values: [
        {
          type: "Tradition Industries",
          value: 0.85,
          goal: 0.7,
          text: "79.5%"
        }
      ]
    }
  ],
  direction: "horizontal",
  xField: "value",
  yField: "type",
  seriesField: "type",
  height: 80,
  cornerRadius: 20,
  progress: {
    style: {
      cornerRadius: 0
    }
  },
  bandWidth: 30,
  axes: [
    {
      orient: "right",
      type: "band",
      domainLine: { visible: false },
      tick: { visible: false },
      label: {
        formatMethod: (val) => "随便写点啥",
        style: {
          fontSize: 16
        }
      }
    },
    {
      orient: "bottom",
      type: "linear",
      visible: true,
      grid: {
        visible: false
      },
      label: {
        formatMethod: (val) => `${val * 100}%`,
        flush: true
      }
    }
  ],
  extensionMark: [
    {
      type: "rule",
      dataId: "id0",
      visible: true,
      style: {
        x: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([1 / 3]);
        },
        y: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) - 15;
        },
        x1: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([1 / 3]);
        },
        y1: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) + 15;
        },
        stroke: "#fff",
        lineWidth: 4,
        zIndex: 1
      }
    },
    {
      type: "rule",
      dataId: "id0",
      visible: true,
      style: {
        x: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([2 / 3]);
        },
        y: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) - 15;
        },
        x1: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([2 / 3]);
        },
        y1: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) + 15;
        },
        stroke: "#fff",
        lineWidth: 4,
        zIndex: 1
      }
    }
  ]
};

const vchart = new VChart(spec, { dom: CONTAINER_ID, disableTriggerEvent: true });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;