DEV Community: Melon

How to monitor events in data dimensions and obtain corresponding data?

Melon — Fri, 07 Jun 2024 09:50:14 +0000

Title

How to monitor events in data dimensions and obtain corresponding data?

Problem Description

Hello, we have a requirement here to monitor the location of the bar chart data dimension and highlight the cells in another table based on the data corresponding to the user's click. How should this be achieved?

Solution

Users can listen to the dimensionClick event on the vchart instance to customize the operation performed after clicking on a data dimension. At the same time, the information of the corresponding data dimension can be obtained in the callback function parameters:

vchart.on('dimensionClick', (args) => {
  const datum = args.datum;
  console.log('Dimension Click!', args, datum);
});

Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 22 },
        { month: 'Tuesday', sales: 13 },
        { month: 'Wednesday', sales: 25 },
        { month: 'Thursday', sales: 29 },
        { month: 'Friday', sales: 38 }
      ]
    }
  ],
  xField: 'month',
  yField: 'sales'
};

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

vchart.on('dimensionClick', (args) => {
  const datum = args.datum;
  console.log('Dimension Click!', args, datum);
});

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

Results

Quote

github：https://github.com/VisActor/VChart
Event: https://visactor.bytedance.net/vchart/api/API/event

How to define the shape of the picture?

Melon — Fri, 07 Jun 2024 09:49:01 +0000

Title

How to define the shape of the picture?

Problem Description

I need to draw a pie chart with a legend, and I want the legend items to be in the shape of a sector. How can I achieve this? Also, how can I set the position of the legend?

Solution

The shape of the legend item can be configured through legends.item.shape.style.symbolType. The content of symbolType can be a vchart built-in shape, such as 'rect', 'circle', etc. At the same time, users can also set a custom svg path to achieve any shape.

  legends: {
    visible: true,
    item: {
      shape: {
        style: {
          symbolType: 'rect'
          // symbolType: 'M -1 1 L 0 0 L 1 1'
        }
      }
    }
  }

The position of the legend is configured by legends.orient , and the optional positions include: left, right, top, bottom:

  legends: {
    visible: true,
    orient: 'right'
  }

Code Example

const data = [
  { value: 10, category: 'One' },
  { value: 9, category: 'Two' },
  { value: 6, category: 'Three' },
  { value: 5, category: 'Four' },
  { value: 4, category: 'Five' },
  { value: 3, category: 'Six' },
  { value: 1, category: 'Seven' }
];
let totalValue = 0;
data.forEach(obj => (totalValue += obj.value));
const map = {};
data.forEach(obj => {
  map[obj.category] = `${((obj.value / totalValue) * 100).toFixed(2)}%`;
});

const spec = {
  type: 'pie',
  data: [
    {
      id: 'pie',
      values: data
    }
  ],
  categoryField: 'category',
  valueField: 'value',
  legends: {
    visible: true,
    orient: 'right',
    item: {
      shape: {
        style: {
          symbolType: 'rect'
        }
      }
    }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });

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

Results

Quote

github：https://github.com/VisActor/VChart
Legend shape：https://visactor.bytedance.net/vchart/option/barChart-legends-discrete#item.shape.style
Legend orient：https://visactor.bytedance.net/vchart/option/barChart-legends-discrete#orient

How to adjust spacing between axis labels in vchart?

Melon — Mon, 20 May 2024 10:05:29 +0000

Title

How to adjust spacing between axis labels in vchart?

Problem Description

When I used vchart to draw a histogram, I found that the spacing between the axis labels was too small, causing the labels to overlap and make it difficult to read. Is there any way to adjust the spacing between axis labels? Can the minGap configuration be configured to set this label spacing?

Solution

The configuration item minGap is used to determine the minimum distance between labels in the axis label sampling calculation.
Now the position of the axis label is associated with the corresponding column position mapping, and the position of the label cannot be configured separately. If you want to adjust the space between axis labels, you can affect the spacing between axis labels by adjusting the paddingOuter property of the scale corresponding to the axis. paddingOuter represents the space occupied by both ends of the axis. Reducing paddingOuter leaves more layout space for labels.

  axes: [
    { orient: 'bottom', paddingOuter: 0 }
  ]

Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 22 },
        { month: 'Tuesday', sales: 13 },
        { month: 'Wednesday', sales: 25 },
        { month: 'Thursday', sales: 29 },
        { month: 'Friday', sales: 38 }
      ]
    }
  ],
  xField: 'month',
  yField: 'sales',
  axes: [
    { orient: 'bottom', paddingOuter: 0 }
  ]
};

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

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

Results

Quote

Does the tooltip support changing the background color?

Melon — Mon, 20 May 2024 10:04:01 +0000

Title

Does the tooltip support changing the background color?

Problem Description

When I use VChart, I want to set the background color of the tooltip, but I cannot find the relevant field in the configuration document. I would like to ask, does the tooltip in VChart support setting the background color? If supported, how should it be configured?

Solution

You can set the style of the Tooltip component background through tooltip.style.panel in the VChart spec, including margins, background color, borders, shadows, etc. At the same time, tooltip.style also supports customizing the title, text, and shape styles of Tooltip:

  tooltip: {
    style: {
      panel: {
        padding: {
          top: 10,
          bottom: 15,
          left: 10,
          right: 10
        },
        backgroundColor: '#eee',
        border: {
          color: '#ccc',
          width: 1,
          radius: 10
        },
        shadow: {
          x: 0,
          y: 0,
          blur: 10,
          spread: 5,
          color: '#ddd'
        }
      },
      titleLabel: {
        fontSize: 20,
        fontFamily: 'Times New Roman',
        fill: 'brown',
        fontWeight: 'bold',
        textAlign: 'center',
        lineHeight: 24
      },
      keyLabel: {
        fontSize: 14,
        fontFamily: 'Times New Roman',
        fill: 'black',
        textAlign: 'center',
        lineHeight: 15,
        spacing: 10
      },
      valueLabel: {
        fontSize: 14,
        fill: 'black',
        textAlign: 'center',
        lineHeight: 15,
        spacing: 10
      },
      shape: {
        size: 15,
        spacing: 10
      },
      spaceRow: 10
    }
  }

Code Example

const markLineValue = 10000;
const spec = {
  type: 'line',
  data: {
    values: [
      { type: 'Nail polish', country: 'Africa', value: 4229 },
      { type: 'Nail polish', country: 'EU', value: 4376 },
      { type: 'Nail polish', country: 'China', value: 3054 },
      { type: 'Nail polish', country: 'USA', value: 12814 },
      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
      { type: 'Rouge', country: 'Africa', value: 5221 },
      { type: 'Rouge', country: 'EU', value: 3574 },
      { type: 'Rouge', country: 'China', value: 7004 },
      { type: 'Rouge', country: 'USA', value: 11624 },
      { type: 'Lipstick', country: 'Africa', value: 9256 },
      { type: 'Lipstick', country: 'EU', value: 4376 },
      { type: 'Lipstick', country: 'China', value: 9054 },
      { type: 'Lipstick', country: 'USA', value: 8814 },
      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
      { type: 'Eyeshadows', country: 'EU', value: 4572 },
      { type: 'Eyeshadows', country: 'China', value: 12043 },
      { type: 'Eyeshadows', country: 'USA', value: 12998 },
      { type: 'Eyeliner', country: 'Africa', value: 5432 },
      { type: 'Eyeliner', country: 'EU', value: 3417 },
      { type: 'Eyeliner', country: 'China', value: 15067 },
      { type: 'Eyeliner', country: 'USA', value: 12321 },
      { type: 'Foundation', country: 'Africa', value: 13701 },
      { type: 'Foundation', country: 'EU', value: 5231 },
      { type: 'Foundation', country: 'China', value: 10119 },
      { type: 'Foundation', country: 'USA', value: 10342 },
      { type: 'Lip gloss', country: 'Africa', value: 4008 },
      { type: 'Lip gloss', country: 'EU', value: 4572 },
      { type: 'Lip gloss', country: 'China', value: 12043 },
      { type: 'Lip gloss', country: 'USA', value: 22998 },
      { type: 'Mascara', country: 'Africa', value: 18712 },
      { type: 'Mascara', country: 'EU', value: 6134 },
      { type: 'Mascara', country: 'China', value: 10419 },
      { type: 'Mascara', country: 'USA', value: 11261 }
    ]
  },
  stack: false,
  xField: 'type',
  yField: 'value',
  seriesField: 'country',
  lineLabel: { visible: true },
  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
  point: {
    style: {
      opacity: 0
    },
    state: {
      dimension_hover: {
        opacity: 1,
        size: 10,
        lineWidth: 2,
        stroke: {
          scale: 'color',
          field: 'country'
        },
        fill: 'white'
      }
    }
  },
  markLine: [
    {
      y: markLineValue,
      endSymbol: {
        visible: false
      },
      line: {
        style: {
          stroke: 'orange',
          lineWidth: 2
        }
      }
    }
  ],
  tooltip: {
    style: {
      panel: {
        padding: {
          top: 10,
          bottom: 15,
          left: 10,
          right: 10
        },
        backgroundColor: '#eee',
        border: {
          color: '#ccc',
          width: 1,
          radius: 10
        },
        shadow: {
          x: 0,
          y: 0,
          blur: 10,
          spread: 5,
          color: '#ddd'
        }
      },
      titleLabel: {
        fontSize: 20,
        fontFamily: 'Times New Roman',
        fill: 'brown',
        fontWeight: 'bold',
        textAlign: 'center',
        lineHeight: 24
      },
      keyLabel: {
        fontSize: 14,
        fontFamily: 'Times New Roman',
        fill: 'black',
        textAlign: 'center',
        lineHeight: 15,
        spacing: 10
      },
      valueLabel: {
        fontSize: 14,
        fill: 'black',
        textAlign: 'center',
        lineHeight: 15,
        spacing: 10
      },
      shape: {
        size: 15,
        spacing: 10
      },
      spaceRow: 10
    }
  }
};

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

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

Results

Quote

Does the tooltip support custom double-line display content?

Melon — Mon, 20 May 2024 07:24:38 +0000

Title

Does the tooltip support custom double-line display content?

Problem Description

I would like to ask if vchart’s pie chart tooltip supports custom two-line display content? Currently, according to the documentation of vchart, I can set the title and content of the tooltip, but it seems that it only supports displaying the content of one piece of the pie chart, and this piece does not seem to be supported in the mini program? Do I need to listen for callbacks?

Solution

VChart Tooltip can configure multiple content contents to display more prompt information:

  tooltip: {
    dimension: {
      content: [
        {
          key: 'value',
          value: (datum) => datum.value,
        },
        {
          key: 'country',
          value: (datum) => datum.country,
        }
      ],
    }
  }

Code Example

const markLineValue = 10000;
const spec = {
  type: 'line',
  data: {
    values: [
      { type: 'Nail polish', country: 'Africa', value: 4229 },
      { type: 'Nail polish', country: 'EU', value: 4376 },
      { type: 'Nail polish', country: 'China', value: 3054 },
      { type: 'Nail polish', country: 'USA', value: 12814 },
      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
      { type: 'Rouge', country: 'Africa', value: 5221 },
      { type: 'Rouge', country: 'EU', value: 3574 },
      { type: 'Rouge', country: 'China', value: 7004 },
      { type: 'Rouge', country: 'USA', value: 11624 },
      { type: 'Lipstick', country: 'Africa', value: 9256 },
      { type: 'Lipstick', country: 'EU', value: 4376 },
      { type: 'Lipstick', country: 'China', value: 9054 },
      { type: 'Lipstick', country: 'USA', value: 8814 },
      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
      { type: 'Eyeshadows', country: 'EU', value: 4572 },
      { type: 'Eyeshadows', country: 'China', value: 12043 },
      { type: 'Eyeshadows', country: 'USA', value: 12998 },
      { type: 'Eyeliner', country: 'Africa', value: 5432 },
      { type: 'Eyeliner', country: 'EU', value: 3417 },
      { type: 'Eyeliner', country: 'China', value: 15067 },
      { type: 'Eyeliner', country: 'USA', value: 12321 },
      { type: 'Foundation', country: 'Africa', value: 13701 },
      { type: 'Foundation', country: 'EU', value: 5231 },
      { type: 'Foundation', country: 'China', value: 10119 },
      { type: 'Foundation', country: 'USA', value: 10342 },
      { type: 'Lip gloss', country: 'Africa', value: 4008 },
      { type: 'Lip gloss', country: 'EU', value: 4572 },
      { type: 'Lip gloss', country: 'China', value: 12043 },
      { type: 'Lip gloss', country: 'USA', value: 22998 },
      { type: 'Mascara', country: 'Africa', value: 18712 },
      { type: 'Mascara', country: 'EU', value: 6134 },
      { type: 'Mascara', country: 'China', value: 10419 },
      { type: 'Mascara', country: 'USA', value: 11261 }
    ]
  },
  stack: false,
  xField: 'type',
  yField: 'value',
  seriesField: 'country',
  lineLabel: { visible: true },
  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
  point: {
    style: {
      opacity: 0
    },
    state: {
      dimension_hover: {
        opacity: 1,
        size: 10,
        lineWidth: 2,
        stroke: {
          scale: 'color',
          field: 'country'
        },
        fill: 'white'
      }
    }
  },
  markLine: [
    {
      y: markLineValue,
      endSymbol: {
        visible: false
      },
      line: {
        style: {
          stroke: 'orange',
          lineWidth: 2
        }
      }
    }
  ],
  tooltip: {
    dimension: {
      content: [
        {
          key: 'value',
          value: (datum) => datum.value,
        },
        {
          key: 'country',
          value: (datum) => datum.country,
        }
      ],
    }
  }
};

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

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

Results

Quote

How to set adaptive y-axis range for line chart?

Melon — Mon, 20 May 2024 07:21:13 +0000

Title

How to set adaptive y-axis range for line chart?

Problem Description

As shown in the figure below, the data range of my line chart is between 80-100. How can I set it so that the Y-axis range can adapt to the range of this data?

Solution

By default, zero is configured as true for continuous axes, and the axis range will default to starting from the 0 value. If you want the range of the continuous axis to adapt to the data range, you can turn off this configuration item:

  axes: [
    { orient: 'left', zero: false },
  ]

Code Example

const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 80
      },
      {
        time: '4:00',
        value: 90
      },
      {
        time: '6:00',
        value: 85
      },
      {
        time: '8:00',
        value: 84
      },
      {
        time: '10:00',
        value: 96
      },
      {
        time: '12:00',
        value: 97
      },
      {
        time: '14:00',
        value: 97
      },
      {
        time: '16:00',
        value: 86
      },
      {
        time: '18:00',
        value: 95
      }
    ]
  },
  xField: 'time',
  yField: 'value',
  axes: [
    { orient: 'left', zero: false },
  ]
};

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

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

Results

Quote

Is it possible to configure the unit of the y-axis without using a function?

Melon — Tue, 07 May 2024 07:05:14 +0000

Title

Is it possible to configure the unit of the y-axis without using a function?

Problem Description

Can I format of the y-axis without using a function? For example, some default thousandths, automatic unit addition, etc. Because only a pure json configuration can be used in the mini program scenario, and the callback function cannot be configured.

Solution

Starting from VChart version 1.7.0, custom function content can be registered by registering an expression function:

function labelFormat(key) {
  return key + 'test';
}

// Global registration function
VChart.registerFunction('labelFormat', labelFormat);

The name of this registered function can be used in the corresponding chart configuration anywhere that supports custom callback functions:

const spec = {
  type: 'bar',
  data: [...],
  xField: 'month',
  yField: 'sales',
  label: {
    visible: true,
    formatMethod: 'labelFormat'
  }
};

The functions of registered functions can take effect in environments such as Feishu widgets and WeChat mini programs.

Code Example

function labelFormat(key) {
  return key + 'test';
}

// Global registration function
VChart.registerFunction('labelFormat', labelFormat);

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 22 },
        { month: 'Tuesday', sales: 13 },
        { month: 'Wednesday', sales: 25 },
        { month: 'Thursday', sales: 29 },
        { month: 'Friday', sales: 38 }
      ]
    }
  ],
  xField: 'month',
  yField: 'sales',
  label: {
    visible: true,
    formatMethod: 'labelFormat'
  }
};

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

Results

Quote

function：https://www.visactor.io/vchart/guide/tutorial_docs/Function
github：https://github.com/VisActor/VChart

How to configure the display of axis units on the axes of a line chart?

Melon — Tue, 07 May 2024 07:03:12 +0000

Title

How to configure the display of axis units on the axes of a line chart?

Problem Description

I want to configure the unit display on the Y-axis. Which parameters need to be configured?

Solution

You can set the unit configuration in the axis configuration item to enable the display of axis units. The text content displayed in the axis unit and the axis unit style can be adjusted through the unit configuration item.

    {
      orient: 'left',
      unit: {
        visible: true,
        text: 'Unit: GB',
        style: { fontSize: 16, fontWeight: 'bold', fill: '#000' }
      }
    }

Code Example

const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: 16
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  xField: 'time',
  yField: 'value',
  axes: [
    { orient: 'bottom' },
    {
      orient: 'left',
      unit: {
        visible: true,
        text: 'Unit: GB',
        style: { fontSize: 16, fontWeight: 'bold', fill: '#000' }
      }
    }
  ]
};

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

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

Results

Quote

Axes unit：https://visactor.io/vchart/option/barChart-axes-linear#unit
github：https://github.com/VisActor/VChart

How to set the x and y axis labels and bar size in vchart bar chart?

Melon — Sun, 28 Apr 2024 07:19:20 +0000

Title

How to set the x and y axis labels and bar size in vchart bar chart?

Description

I am using vchart bar chart and I want to set the font size of the x and y axis labels and the size of the bars. However, I couldn't find the corresponding configuration options in the documentation. I tried some parameters, but none of them worked. How can I set them?

Solution

The font size of the x and y axis labels and the size of the bars in vchart bar chart can be configured through the style field of the axis label. At the same time, the size of the bars can be adjusted by adjusting the width of the bar chart.

Sample Code

const spec = {
  type: 'bar',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: 16
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  barWidth: '50%',
  barMinWidth: 20,
  barMaxWidth: 50,
  xField: 'time',
  yField: 'value',
  axes: [
    {
      orient: 'left',
      label: {
        formatMethod(val) {
          return 
${(val * 100).toFixed(2)}%
;
        },
        style: { fontSize: 20 }
      }
    },
    { orient: 'bottom', label: { style: { fontSize: 20 } } }
  ]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Result

How to display "total" in the tooltip of a line chart?

Melon — Sun, 28 Apr 2024 07:16:07 +0000

Title

How to display "total" in the tooltip of a line chart?

Description

When using a line chart, I want to display the "total" item in the tooltip, but I don't know how to do it. How can I achieve this?

Solution

You can use updateContent to do post-processing of the tooltip content.
In the content of dimension, you can add an item with the key "total" and the value of a function. This function receives a datumList parameter, which represents the list of all data in the current tooltip. Then calculate the sum of the values of all data and return it.
In updateContent, you can also add an item with the key "total" and the same function, so that the "total" item can be displayed in the tooltip.

Code example

const data = [
  { year: '2012', type: 'Forest', value: 320 },
  { year: '2012', type: 'Steppe', value: 220 },
  { year: '2012', type: 'Desert', value: 150 },
  { year: '2012', type: 'Wetland', value: 98 },
  { year: '2013', type: 'Forest', value: 332 },
  { year: '2013', type: 'Steppe', value: 182 },
  { year: '2013', type: 'Desert', value: 232 },
  { year: '2013', type: 'Wetland', value: 77 },
  { year: '2014', type: 'Forest', value: 301 },
  { year: '2014', type: 'Steppe', value: 191 },
  { year: '2014', type: 'Desert', value: 201 },
  { year: '2014', type: 'Wetland', value: 101 },
  { year: '2015', type: 'Forest', value: 334 },
  { year: '2015', type: 'Steppe', value: 234 },
  { year: '2015', type: 'Desert', value: 154 },
  { year: '2015', type: 'Wetland', value: 99 },
  { year: '2016', type: 'Forest', value: 390 },
  { year: '2016', type: 'Steppe', value: 290 },
  { year: '2016', type: 'Desert', value: 190 },
  { year: '2016', type: 'Wetland', value: 40 }
];
const aggregation = {};
data.forEach(({ year, value }) => {
  if (!aggregation[year]) {
    aggregation[year] = 0;
  }
  aggregation[year] += value;
});
const spec = {
  type: 'bar',
  data: [{ id: 'bar', values: data }],
  xField: ['year', 'type'],
  yField: 'value',
  seriesField: 'type',
  bar: { state: { legend_hover_reverse: { fill: '#ccc' } } },
  legends: { visible: true },
  tooltip: {
    mark: {
      title: { value: (datum) => datum['year'] + '年' },
      content: [
        { key: (datum) => datum['type'], value: (datum) => datum['value'] },
        {
          hasShape: false,
          key: 'Proportion',
          value: (datum) => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%'
        }
      ]
    },
    dimension: {
      title: { value: (datum) => datum['year'] + '年' },
      content: [{ key: (datum) => datum['type'], value: (datum) => datum['value'] }],
      updateContent: (prev) => {
        console.log(prev);
        const total = prev.reduce((acc, cur) => {
          return acc + cur.value;
        }, 0);
        return (prev ?? []).concat({ key: 'total', value: total });
      }
    }
  }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync(); // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart;

Result

How to solve the problem of the line chart being partially crossed?

Melon — Sun, 28 Apr 2024 07:07:50 +0000

Title

How to solve the problem of the line chart for a stacked line chart and a bidirectional bar chart combination being partially crossed?

Description

After combining a stacked line chart and a bidirectional bar chart, I found that the line chart is partially forked, as shown in the figure below. How can I solve this problem?

Solution

This problem is caused by the fact that the line chart does not sort the data according to the order of the axis by default, but draws it according to the order of the data in the array. Here, you can turn on the sortDataByAxis switch to sort the data according to the order of the axis, and the drawing will be normal.

Code Example


const barMockData = [
  { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 209 },
  { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-25', value: 0 },
  { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 104 },
  { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-26', value: -3 },
  { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 61 },
  { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-27', value: -1 },
  { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 4 },
  { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-25', value: -4 },
  { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 3 },
  { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-26', value: -7 },
  { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 4 },
  { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-27', value: -8 },
  { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 1 },
  { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-24', value: -1 },
  { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 1 },
  { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-25', value: -1 },
  { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 1 },
  { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-26', value: -1 },
  { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 0 },
  { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-27', value: -5 },
  { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 177 },
  { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-25', value: -1 },
  { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 72 },
  { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-26', value: -30 },
  { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 127 },
  { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-27', value: -9 },
  { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 48 },
  { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-25', value: -4 },
  { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 333 },
  { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-26', value: -1 },
  { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 26 },
  { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-27', value: -3 },
  { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 57 },
  { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-25', value: -3 },
  { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 1 },
  { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-26', value: -11 },
  { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 43 },
  { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-27', value: 0 }
];
const mockData = [
  { value: 2360, name: 'a', date: '2023-09-23' },
  { value: 3829, name: 'b', date: '2023-09-23' },
  { value: 1102, name: 'c', date: '2023-09-23' },
  { value: 4856, name: 'd', date: '2023-09-23' },
  { value: 5039, name: 'e', date: '2023-09-23' },
  { value: 2180, name: 'f', date: '2023-09-23' },
  { value: 2360, name: 'a', date: '2023-09-24' },
  { value: 3829, name: 'b', date: '2023-09-24' },
  { value: 1102, name: 'c', date: '2023-09-24' },
  { value: 4856, name: 'd', date: '2023-09-24' },
  { value: 5039, name: 'e', date: '2023-09-24' },
  { value: 2180, name: 'f', date: '2023-09-24' },
  { value: 2140, name: 'a', date: '2023-09-25' },
  { value: 3829, name: 'b', date: '2023-09-25' },
  { value: 1102, name: 'c', date: '2023-09-25' },
  { value: 4670, name: 'd', date: '2023-09-25' },
  { value: 4990, name: 'e', date: '2023-09-25' },
  { value: 2123, name: 'f', date: '2023-09-25' },
  { value: 2028, name: 'a', date: '2023-09-26' },
  { value: 3833, name: 'b', date: '2023-09-26' },
  { value: 1102, name: 'c', date: '2023-09-26' },
  { value: 4621, name: 'd', date: '2023-09-26' },
  { value: 4644, name: 'e', date: '2023-09-26' },
  { value: 2133, name: 'f', date: '2023-09-26' },
  { value: 1967, name: 'a', date: '2023-09-27' },
  { value: 3837, name: 'b', date: '2023-09-27' },
  { value: 1107, name: 'c', date: '2023-09-27' },
  { value: 4498, name: 'd', date: '2023-09-27' },
  { value: 4622, name: 'e', date: '2023-09-27' },
  { value: 2087, name: 'f', date: '2023-09-27' },
  { value: 1911, name: 'a', date: '2023-09-28' },
  { value: 3838, name: 'b', date: '2023-09-28' },
  { value: 1106, name: 'c', date: '2023-09-28' },
  { value: 4042, name: 'd', date: '2023-09-28' },
  { value: 4617, name: 'e', date: '2023-09-28' },
  { value: 2087, name: 'f', date: '2023-09-28' }
];
const spec = {
  type: 'common',
  bar: { state: { hover: { style: { fillOpacity: 0.5 } } }, style: { cursor: 'pointer' } },
  title: {
    visible: true,
    align: 'left',
    verticalAlign: 'top',
    orient: 'top',
    innerPadding: { bottom: 10 },
    text: '每日问题详情',
    subtext: '左Y轴正数为修复数，负数为新增数（可点击柱体查看详情）。右轴为每日总问题数'
  },
  data: [
    { id: 'barData', values: barMockData },
    { id: 'id1', values: mockData }
  ],
  series: [
    {
      type: 'bar',
      id: 'bar',
      dataIndex: 0,
      seriesField: 'name',
      xField: ['time', 'groupName'],
      yField: 'value'
    },
    {
      type: 'line',
      id: 'line',
      dataIndex: 1,
      xField: 'date',
      yField: 'value',
      seriesField: 'name',
      stack: true,
      sortDataByAxis: true
    }
  ],
  axes: [
    { orient: 'left', id: 'bar', seriesId: ['bar'], tick: { tickCount: 6 }, nice: true },
    {
      orient: 'right',
      seriesId: ['line'],
      sync: { axisId: 'bar', tickAlign: true },
      gird: { visible: false },
      nice: true
    },
    { orient: 'bottom', domainLine: { onZero: true } }
  ],
  legends: { visible: true, padding: { top: '2%', right: '10%' } },
  tooltip: {
    mark: {
      content: [
        {
          key: (datum) => datum?.name,
          value: (datum) => (datum?.value < 0 ? 0 - datum?.value : datum?.value)
        }
      ]
    },
    dimension: {
      content: [
        {
          key: (datum) => datum?.name,
          value: (datum) => (datum?.value < 0 ? 0 - datum?.value : datum?.value)
        }
      ]
    }
  }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Result

How to configure custom themes in VChart?

Melon — Sun, 28 Apr 2024 07:04:17 +0000

Title

How to configure custom themes in VChart?

Problem Description

I am using VChart for data visualization and I want to set a custom theme for my charts, but I don't know how to do it. Also, I want to know how to dynamically update the theme of the charts. Can someone with experience guide me through this?

Solution

VChart provides two ways to configure and update custom themes: by configuring the theme through the chart spec and by registering the theme through the ThemeManager. We will explain how to use these two methods separately.

Configuring the theme through the chart spec

When defining a chart, we can directly pass a theme object that conforms to the ITheme type to the theme configuration item of the chart spec to apply this custom theme. The specific steps are as follows:

Create a theme object that conforms to the ITheme type, for example:

const theme = {
  colorScheme: {
    default: [
      '#5383F4',
      '#7BCF8E',
      '#FF9D2C',
      '#FFDB26',
      '#7568D9',
      '#80D8FB',
      '#1857A3',
      '#CAB0E8',
      '#FF8867',
      '#B9E493',
      '#2CB4A8',
      '#B9E4E3'
    ]
  },
  series: {
    bar: {
      barMaxWidth: 15,
      label: {
        visible: true,
        position: 'top',
        formatMethod: text => text + '%'
      }
    }
  },
  component: {
    axis: {
      label: {
        style: { fontFamily: 'Times New Roman' }
      }
    }
  },
  markByName: {
    bar: {
      style: {
        cornerRadius: 15
      }
    }
  }
};

When defining the chart, pass the theme object to the theme configuration item of the chart spec, for example:

const spec = {
  type: 'bar',
  data: [
    {
      id: 'id0',
      values: data
    }
  ],
  ...
  theme: theme,
  ...
}

Registering the theme through the ThemeManager

VChart also provides a theme manager called ThemeManager, which you can use to globally register custom themes. You can also use ThemeManager.setCurrentTheme to apply a registered theme by its name. The specific steps are as follows:

VChart.ThemeManager.registerTheme('userTheme', theme);

In the chart where you want to use the theme, use ThemeManager.setCurrentTheme to apply the theme, for example:

vchart.ThemeManager.setCurrentTheme('myTheme');

DEV Community: Melon

How to monitor events in data dimensions and obtain corresponding data?

Title

Problem Description

Solution

Code Example

Results

Quote

How to define the shape of the picture?

Title

Problem Description

Solution

Code Example

Results

Quote

How to adjust spacing between axis labels in vchart?

Title

Problem Description

Solution

Code Example

Results

Quote

Does the tooltip support changing the background color?

Title

Problem Description

Solution

Code Example

Results

Quote

Does the tooltip support custom double-line display content?

Title

Problem Description

Solution

Code Example

Results

Quote

How to set adaptive y-axis range for line chart?

Title

Problem Description

Solution

Code Example

Results

Quote

Is it possible to configure the unit of the y-axis without using a function?

Title

Problem Description

Solution

Code Example

Results

Quote

How to configure the display of axis units on the axes of a line chart?

Title

Problem Description

Solution

Code Example

Results

Quote

How to set the x and y axis labels and bar size in vchart bar chart?

Title

Description

Solution

Sample Code

Result

Related Documentation

How to display "total" in the tooltip of a line chart?

Title

Description

Solution

Code example

Result

Related documentation

How to solve the problem of the line chart being partially crossed?

Title

Description

Solution

Code Example

Result

Related documentation

How to configure custom themes in VChart?

Title