MVC uses Dotnet. HighCharts for chart 01, region chart, and highcharts
DotNet. HighCharts is a good choice if you want to use charts in MVC. DotNet. HighCharts is an open-source JavaScript chart library that supports dozens of types of icons, such as line charts, bar charts, and pie charts. This article provides a simple area chart.
Enter the keyword "DotNet. HighCharts" in NuGet ".
After installation, HighCharts files are added to Scripts and the Assembly.
HomeController.
Using System. collections. generic; using System. web. mvc; using DotNet. highcharts; using DotNet. highcharts. enums; using DotNet. highcharts. helpers; using DotNet. highcharts. options; namespace MyHighCharts. controllers {public class HomeController: Controller {public ActionResult Index () {// create region 1 var series1 = new Series (); series1.Name = "region 1 "; // Poin array Point [] series1Points = {new Point () {X = 0.0, Y = 0.0}, new Point () {X = 10.0, Y = 0.0 }, new Point () {X = 10.0, Y = 10.0}, new Point () {X = 0.0, Y = 10.0}; series1.Data = new Data (series1Points ); // create Region 2 var series2 = new Series (); series2.Name = "Region 2"; // Point array Point [] series2Points = {new Point () {X = 5.0, Y = 5.0}, new Point () {X = 15.0, Y = 5.0}, new Point () {X = 15.0, Y = 15.0}, new Point () {X = 5.0, Y = 15.0 }}; series2.Data = new Data (series2Points ); // Add the two regions to the Series set var chartSeries = new List <Series> (); chartSeries. add (series1); chartSeries. add (series2); // create chart model var chart1 = new Highcharts ("My first region Chart"); chart1.InitChart (new chart () {defaserseriestype = ChartTypes. area }). setTitle (new Title () {Text = "My first region chart "}). setSeries (chartSeries. toArray (); ViewBag. chartModel = chart1; return View ();}}}
Home/Index. csthml.
@{ Layout = null;}<!DOCTYPE html>
How can I change the position of a dynamic chart made by Jquery and Highcharts when I click a chart?
You can directly implement it using jquery.
First, set the id for the div that stores the three statistical graphs.
When you click an id, you can change the html of the id and the html of the target id. (try this first. It is possible that the statistical table will not work after the operation, switch to clone and then swap)
Or you can modify the css to control it. Set the big layer position: relative outside the three statistical tables; the layers of the three statistical tables are position: absolute; Set left and top to fix the positions of the three. Bind the click Event and modify the css of the corresponding div. This method should be more efficient.
Hope to help you.
How does aspnet call Highchartsjs to display charts?
Friend, I used the HighCharts control when I went to college. Your question should be: "I can use it to generate a bar chart, but why does the Chinese character in the exported image become a "Port" when using its own image export function? "
I was also confused about this problem. The first thing I thought of was the difference between the code of my project and the HighCharts control. Finally, I found that this was not the case, finally, I read the JS Code of this control and found the problem: You can try it. If you are not connected to the Internet, its built-in image export function will not be used, because it is actually very simple: its image export function is not written in JS scripts, but on the remote server. However, the code on the remote server does not support exporting Chinese characters, you don't know how to write this code, so you can't export Chinese at all. In the end, you can't change the control for a long time. If your project requires exporting Chinese text, we recommend that you do not use this control. We recommend that you use the dundas bar chart control.
If you do not need to export an image, it comes with some examples. You can right-click the source file and see how js references it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
