openharmony 鸿蒙 js-components-basic-chart

2025-06-12 浏览 (1)

chart

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

The <chart> component displays line charts, gauge charts, and bar charts.

Required Permissions

None

Child Components

Not supported

Attributes

In addition to the universal attributes, the following attributes are supported.

NameTypeDefault ValueMandatoryDescription
typestringlineNoChart type. Dynamic modification is not supported. Available values include:
- bar: bar chart
- line: line chart
- gauge: gauge chart
- progress5+: circle chart of progresses
- loading5+: circle chart of loading processes
- rainbow5+: circle chart of proportions
optionsChartOptions-NoChart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.
datasetsArray<ChartDataset>-NoData sets. You must set data sets for bar charts and line charts. Data sets for a gauge chart do not take effect. You can set multiple datasets and their background colors.
segments5+DataSegment |Array<DataSegment>-NoData structures used by progress, loading, and rainbow charts.
DataSegment is available for progress and loading charts.
Array<DataSegment> is available for rainbow charts. A maximum of nine DataSegments are supported in the array.
effects5+booleantrueNoWhether to enable the effects for progress and rainbow charts.
animationduration6+number3000NoAnimation duration for expanding a rainbow chart, in milliseconds.

Table 1 ChartOptions

NameTypeDefault ValueMandatoryDescription
xAxisChartAxis-YesX-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis.
yAxisChartAxis-YesY-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis.
seriesChartSeries-NoData sequence parameters. Only line charts support this attribute.
- Line style, such as the line width and whether the line is smooth.
- Style and size of the white point at the start of the line.

Table 2 ChartDataset

NameTypeDefault ValueMandatoryDescription
strokeColor<color>#ff6384NoStroke color. Only line charts support this attribute.
fillColor<color>#ff6384NoFill color.
For line charts, the value indicates the gradient color to fill.
dataArray<number> |Array<Point>5+-YesData of the drawn line or bar.
gradientbooleanfalseNoWhether to display the gradient color. Only line charts support this attribute.

Table 3 ChartAxis

NameTypeDefault ValueMandatoryDescription
minnumber0NoMinimum value of the axis. Only line charts support negative numbers.
maxnumber100NoMaximum value of the axis. Only line charts support negative numbers.
axisTicknumber10NoNumber of scales displayed on the axis. The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(max – min).
In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.
displaybooleanfalseNoWhether to display the axis.
color<color>#c0c0c0NoAxis color.

Table 4 ChartSeries

NameTypeDefault ValueMandatoryDescription
lineStyleChartLineStyle-NoLine style, such as the line width and whether the line is smooth.
headPointPointStyle-NoStyle and size of the white point at the start of the line.
topPointPointStyle-NoStyle and size of the top point.
bottomPointPointStyle-NoStyle and size of the bottom point.
loopChartLoop-NoWhether to start drawing again when the screen is looped.

Table 5 ChartLineStyle

NameTypeDefault ValueMandatoryDescription
width<length>1pxNoLine width.
smoothbooleanfalseNoWhether the line is smooth.

Table 6 PointStyle

NameTypeDefault ValueMandatoryDescription
shapestringcircleNoShape of the highlight point. Available values are as follows:
- circle
- square
- triangle
size<length>5pxNoSize of the highlight point.
strokeWidth<length>1pxNoStroke width.
strokeColor<color>#ff0000NoStroke color.
fillColor<color>#ff0000NoFill color.

Table 7 ChartLoop

NameTypeDefault ValueMandatoryDescription
margin<length>1NoNumber of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use margin together with topPoint, bottomPoint, or headPoint for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.
gradientbooleanfalseNoWhether to perform gradient erase.

Table 8 Point5+

NameTypeDefault ValueMandatoryDescription
valuenumber0YesY coordinate of the point to draw.
pointStylePointStyle-NoStyle of the point.
descriptionstring-NoDescription text of the point.
textLocationstring-NoPosition of the description text relative to the point. Available values are as follows: top: above the point
bottom: below the point
none: not displayed
textColor<color>#000000NoColor of the description text.
lineDashstringsolidNoDashed line pattern. You can set the dash length and space length between the dashes. - "dashed, 5, 5": dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value "solid" indicates a solid line.
lineColor<color>#000000NoLine color. If this attribute is not set, the value of strokeColor is used.

Table 9 DataSegment5+

NameTypeDefault ValueMandatoryDescription
startColorColor-NoColor of the start position. If this attribute is set, endColor must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table.
endColorColor-NoColor of the end position. If this attribute is set, startColor must be set.
If this attribute is not set, the default color array preset in the system is used.
valuenumber0YesPercentage for the data segment. The maximum value is 100.
namestring-NoName of the data segment.
Data SegmentLight ModeDark Mode
0Start color: #f7ce00; end color: #f99b11Start color: #d1a738; end color: #eb933d
1Start color: #f76223; end color: #f2400aStart color: #e67d50; end color: #d9542b
2Start color: #f772ac; end color: #e65392Start color: #d5749e; end color: #d6568d
3Start color: #a575eb; end color: #a12df7Start color: #9973d1; end color: #5552d9
4Start color: #7b79f7; end color: #4b48f7Start color: #7977d9; end color: #f99b11
5Start color: #4b8af3; end color: #007dffStart color: #4c81d9; end color: #217bd9
6Start color: #73c1e6; end color: #4fb4e3Start color: #5ea6d1; end color: #4895c2
7Start color: #a5d61d; end color: #69d14fStart color: #91c23a; end color: #70ba5d
8Start color: #a2a2b0; end color: #8e8e93Start color: #8c8c99; end color: #6b6b76

For the gauge charts, the following attributes are also supported.

NameTypeDefault ValueMandatoryDescription
percentnumber0NoPercentage of the current value to the total value. The value ranges from 0 to 100.

Styles

In addition to the universal styles, the following styles are supported.

NameTypeDefault ValueMandatoryDescription
stroke-width<length>32px (gauge charts)
24px (rainbow charts)		NoWidth of the scale bar for gauge and rainbow charts.
start-angle<deg>240 (gauge charts)
0 (rainbow charts)		NoStart angle of the scale bar for gauge and rainbow charts, which starts from zero o'clock. The value ranges from 0 to 360.
total-angle<deg>240 (gauge charts)
360 (rainbow charts)		NoTotal length of the scale bar for gauge and rainbow charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction.
center-x<length>-NoCenter of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-y and radius. This style is supported by the gauge chart only.
center-y<length>-NoCenter of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-x and radius. This style is supported by the gauge chart only.
radius<length>-NoRadius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the width and height in the common styles, and must be used together with center-x and center-y. This style is supported by the gauge chart only.
colorsArray-NoColor of each section for the scale bar of the gauge component.
For example, colors: #ff0000, #00ff00. This style is supported by the gauge chart only.
weightsArray-NoWeight of each section for the scale bar of the gauge component.
For example, weights: 2, 2. This style is supported by the gauge chart only.
font-family5+Array-NoFont style of the description text. You can use a custom font.
font-size5+<length>-NoFont size of the description text.

Events

The universal events are supported.

Methods

In addition to the universal methods, the following methods are supported.

NameParameterDescription
append{
serial: number,
data: Array<number>,
}		Data is dynamically added to an existing data sequence. The target sequence is specified based on serial, which is the subscript of the datasets array and starts from 0. For example, if the value of serial is index, use data to update datasets[index].data. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the xAxis min/max setting.

Example

  1. Line chart

    <!-- xxx.hml -->
<div class="container">
  <stack class="chart-region">
    <image class="chart-background" src="common/background.png"></image>
    <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
  </stack>
  <button value="Add data" onclick="addData"></button>
</div>

    /* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.chart-region {
  height: 400px;
  width: 700px;
}
.chart-background {
  object-fit: fill;
}
.chart-data {
  width: 700px;
  height: 600px;
}
button {
  width: 100%;
  height: 50px;
  background-color: #F4F2F1;
  text-color: #0C81F3;
}

    // xxx.js
export default {
  data: {
    lineData: [
      {
        strokeColor: '#0081ff',
        fillColor: '#cce5ff',
        data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
        gradient: true
      }
    ],
    lineOps: {
      xAxis: {
        min: 0,
        max: 20,
        display: false
      },
      yAxis: {
        min: 0,
        max: 1000,
        display: false
      },
      series: {
        lineStyle: {
          width: "5px",
          smooth: true
        },
        headPoint: {
          shape: "circle",
          size: 20,
          strokeWidth: 5,
          fillColor: '#ffffff',
          strokeColor: '#007aff',
          display: true
        },
        loop: {
          margin: 2,
          gradient: true
        }
      }
    }
  },
  addData() {
    this.$refs.linechart.append({
      serial: 0,
      data: [Math.floor(Math.random() * 400) + 400]
    })
  }
}

    en-us_image_0000001173324843

  2. Bar chart

    <!-- xxx.hml -->
<div class="container">
  <stack class="data-region">
    <image class="data-background" src="common/background.png"></image>
    <chart class="data-bar" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart>
  </stack>
</div>

    /* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.data-region {
  height: 400px;
  width: 700px;
}
.data-background {
  object-fit: fill;
}
.data-bar {
  width: 700px;
  height: 400px;
}

    // xxx.js
export default {
  data: {
    barData: [
      {
        fillColor: '#f07826',
        data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628]
      },
      {
        fillColor: '#cce5ff',
        data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410]
      },
      {
        fillColor: '#ff88bb',
        data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657]
      },
    ],
    barOps: {
      xAxis: {
        min: 0,
        max: 20,
        display: false,
        axisTick: 10
      },
      yAxis: {
        min: 0,
        max: 1000,
        display: false
      }
    }
  }
}

    en-us_image_0000001173164929

  3. Gauge chart

    <!-- xxx.hml -->
<div class="container">
  <div class="gauge-region">
    <chart class="data-gauge" type="gauge" percent = "50"></chart>
  </div>
</div>

    /* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gauge-region {
  height: 400px;
  width: 400px;
}
.data-gauge {
  colors: #83f115, #fd3636, #3bf8ff;
  weights: 4, 2, 1;
}

    en-us_image_0000001127125264

  4. Circle chart of progresses, loading progresses, or proportions

    <!-- xxx.hml -->
<div class="container">
    <text class="text">progress Example</text>
    <stack class="chart-region">
        <chart class="" type="progress" segments="{{ progressdata }}"></chart>
    </stack>
    <text class="text">loading Example</text>
    <stack class="chart-region">
        <chart class="" type="loading" segments="{{ loadingdata }}"></chart>
    </stack>
    <text class="text">rainbow Example</text>
    <stack class="chart-region">
        <chart class="" type="rainbow" segments="{{ rainbowdata }}" effects="true" animationduration="5000"></chart>
    </stack>
</div>

    /* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.chart-region {
    height: 400px;
    width: 700px;
    margin-top: 10px;
}
.text {
    margin-top: 30px;
}

    // xxx.js
export default {
   data: {
      progressdata: {
         value: 50,
         name: 'progress'
      },
      loadingdata: {
         startColor: "#ffc0cb",
         endColor: "#00bfff",
      },
      rainbowdata: [
         {
            value: 50,
            name: 'item1'
         },
         {
            value: 10,
            name: 'item2'
         },
         {
            value: 20,
            name: 'item3'
         },
         {
            value: 10,
            name: 'item4'
         },
         {
            value: 10,
            name: 'item5'
         }
      ]
   }
}

    rainbow

你可能感兴趣的鸿蒙文章

harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm (ArkUI.Full)

harmony 鸿蒙Data Type Attributes

harmony 鸿蒙button

harmony 鸿蒙divider

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙label

harmony 鸿蒙marquee

harmony 鸿蒙menu

  • 所属分类： 后端技术
  • 本文标签： 软件 鸿蒙
  • 版权声明： 本文链接 https://seaxiang.com/blog/aN8IIk