{"id":24854,"date":"2024-03-16T03:58:26","date_gmt":"2024-03-16T03:58:26","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/"},"modified":"2024-03-22T04:45:22","modified_gmt":"2024-03-22T04:45:22","slug":"how-to-use-the-chartcontrol-component-in-dev","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/","title":{"rendered":"How to use the ChartControl component in DEV."},"content":{"rendered":"

The ChartControl is a commonly used data visualization tool used to create various types of charts such as line charts, bar charts, and pie charts. Here are some common uses of the ChartControl:<\/p>\n

    \n
  1. Input chart data:<\/li>\n<\/ol>\n
    \/\/ \u521b\u5efa\u4e00\u4e2aSeries\u5bf9\u8c61\r\nSeries series = new Series(\"Series1\", ViewType.Line);\r\n\r\n\/\/ \u6dfb\u52a0\u6570\u636e\u70b9\r\nseries.Points.Add(new SeriesPoint(\"Point1\", 10));\r\nseries.Points.Add(new SeriesPoint(\"Point2\", 20));\r\nseries.Points.Add(new SeriesPoint(\"Point3\", 30));\r\n\r\n\/\/ \u5c06Series\u5bf9\u8c61\u6dfb\u52a0\u5230ChartControl\u7684Series\u96c6\u5408\u4e2d\r\nchartControl.Series.Add(series);\r\n<\/code><\/pre>\n
      \n
    1. Customize the chart style:<\/li>\n<\/ol>\n
      \/\/ \u8bbe\u7f6e\u56fe\u8868\u7684\u6807\u9898\r\nchartControl.Titles.Add(new ChartTitle() { Text = \"Chart Title\" });\r\n\r\n\/\/ \u8bbe\u7f6e\u56fe\u8868\u7684\u80cc\u666f\u8272\r\nchartControl.BackColor = Color.LightYellow;\r\n\r\n\/\/ \u8bbe\u7f6e\u56fe\u8868\u7684\u8fb9\u6846\u7ebf\u989c\u8272\u548c\u5bbd\u5ea6\r\nchartControl.BorderOptions.Color = Color.Red;\r\nchartControl.BorderOptions.Thickness = 2;\r\n<\/code><\/pre>\n
        \n
      1. Set up the chart axis:<\/li>\n<\/ol>\n
        \/\/ \u8bbe\u7f6eX\u8f74\u7684\u663e\u793a\u683c\u5f0f\r\nchartControl.Series[0].ArgumentScaleType = ScaleType.Qualitative;\r\nchartControl.Series[0].ArgumentDataMember = \"XValue\";\r\n\r\n\/\/ \u8bbe\u7f6eY\u8f74\u7684\u663e\u793a\u683c\u5f0f\r\nchartControl.Series[0].ValueScaleType = ScaleType.Numerical;\r\nchartControl.Series[0].ValueDataMember = \"YValue\";\r\n<\/code><\/pre>\n
          \n
        1. Choose a chart type:<\/li>\n<\/ol>\n
          \/\/ \u8bbe\u7f6e\u56fe\u8868\u7c7b\u578b\u4e3a\u6298\u7ebf\u56fe\r\nchartControl.Series[0].ChangeView(ViewType.Line);\r\n\r\n\/\/ \u8bbe\u7f6e\u56fe\u8868\u7c7b\u578b\u4e3a\u67f1\u72b6\u56fe\r\nchartControl.Series[0].ChangeView(ViewType.Bar);\r\n\r\n\/\/ \u8bbe\u7f6e\u56fe\u8868\u7c7b\u578b\u4e3a\u997c\u56fe\r\nchartControl.Series[0].ChangeView(ViewType.Pie);\r\n<\/code><\/pre>\n
            \n
          1. Add a legend:<\/li>\n<\/ol>\n
            \/\/ \u521b\u5efa\u4e00\u4e2a\u56fe\u4f8b\u5bf9\u8c61\r\nLegend legend = new Legend();\r\n\r\n\/\/ \u8bbe\u7f6e\u56fe\u4f8b\u7684\u4f4d\u7f6e\r\nlegend.DockTarget = chartControl;\r\nlegend.AlignmentVertical = LegendAlignmentVertical.TopOutside;\r\nlegend.AlignmentHorizontal = LegendAlignmentHorizontal.Right;\r\n\r\n\/\/ \u5c06\u56fe\u4f8b\u6dfb\u52a0\u5230ChartControl\u7684Legends\u96c6\u5408\u4e2d\r\nchartControl.Legends.Add(legend);\r\n<\/code><\/pre>\n
            These are just some basic uses of ChartControl, further customization options include setting the style of the chart, adding data labels, setting animation effects, and more. For more detailed information, refer to the official documentation or relevant tutorials for ChartControl.<\/p>\n","protected":false},"excerpt":{"rendered":"
            The ChartControl is a commonly used data visualization tool used to create various types of charts such as line charts, bar charts, and pie charts. Here are some common uses of the ChartControl: Input chart data: \/\/ \u521b\u5efa\u4e00\u4e2aSeries\u5bf9\u8c61 Series series = new Series(“Series1”, ViewType.Line); \/\/ \u6dfb\u52a0\u6570\u636e\u70b9 series.Points.Add(new SeriesPoint(“Point1”, 10)); series.Points.Add(new SeriesPoint(“Point2”, 20)); series.Points.Add(new SeriesPoint(“Point3”, 30)); […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-24854","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to use the ChartControl component in DEV. - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use the ChartControl component in DEV.\" \/>\n<meta property=\"og:description\" content=\"The ChartControl is a commonly used data visualization tool used to create various types of charts such as line charts, bar charts, and pie charts. Here are some common uses of the ChartControl: Input chart data: \/\/ \u521b\u5efa\u4e00\u4e2aSeries\u5bf9\u8c61 Series series = new Series("Series1", ViewType.Line); \/\/ \u6dfb\u52a0\u6570\u636e\u70b9 series.Points.Add(new SeriesPoint("Point1", 10)); series.Points.Add(new SeriesPoint("Point2", 20)); series.Points.Add(new SeriesPoint("Point3", 30)); […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T03:58:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T04:45:22+00:00\" \/>\n<meta name=\"author\" content=\"Emily Johnson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emily Johnson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/\"},\"author\":{\"name\":\"Emily Johnson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\"},\"headline\":\"How to use the ChartControl component in DEV.\",\"datePublished\":\"2024-03-16T03:58:26+00:00\",\"dateModified\":\"2024-03-22T04:45:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/\"},\"wordCount\":100,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/\",\"name\":\"How to use the ChartControl component in DEV. - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T03:58:26+00:00\",\"dateModified\":\"2024-03-22T04:45:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use the ChartControl component in DEV.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\",\"name\":\"Emily Johnson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"caption\":\"Emily Johnson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to use the ChartControl component in DEV. - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/","og_locale":"en_US","og_type":"article","og_title":"How to use the ChartControl component in DEV.","og_description":"The ChartControl is a commonly used data visualization tool used to create various types of charts such as line charts, bar charts, and pie charts. Here are some common uses of the ChartControl: Input chart data: \/\/ \u521b\u5efa\u4e00\u4e2aSeries\u5bf9\u8c61 Series series = new Series(\"Series1\", ViewType.Line); \/\/ \u6dfb\u52a0\u6570\u636e\u70b9 series.Points.Add(new SeriesPoint(\"Point1\", 10)); series.Points.Add(new SeriesPoint(\"Point2\", 20)); series.Points.Add(new SeriesPoint(\"Point3\", 30)); […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T03:58:26+00:00","article_modified_time":"2024-03-22T04:45:22+00:00","author":"Emily Johnson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Emily Johnson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/"},"author":{"name":"Emily Johnson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378"},"headline":"How to use the ChartControl component in DEV.","datePublished":"2024-03-16T03:58:26+00:00","dateModified":"2024-03-22T04:45:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/"},"wordCount":100,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/","name":"How to use the ChartControl component in DEV. - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T03:58:26+00:00","dateModified":"2024-03-22T04:45:22+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-chartcontrol-component-in-dev\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use the ChartControl component in DEV."}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378","name":"Emily Johnson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","caption":"Emily Johnson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=24854"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24854\/revisions"}],"predecessor-version":[{"id":58914,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24854\/revisions\/58914"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=24854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=24854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=24854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}