.NET Highcharts в MVC

Question

Я новичок в .NET и использую старшие чарты в MVC.Моя задача состоит в том, чтобы при щелчке на графике я отображал таблицу со связанными данными, основанными на щелчке по значению осиПри нажатии на график я хочу получить выбранное значение оси X и передать это значение в представление.Как я могу это сделать?Могу ли я получить это значение от Formatter?Как я могу добавить событие клика к этому?

Viewcode:

@model DotNet.Highcharts.Highcharts
@(Model)

Код контроллера:

public ActionResult CreateSeverityChartVM(string s1, string s2, string s3, string s4, string s5)
    {
        string select = "";
        List<object> series = new List<object>();

        series.Add(new DotNet.Highcharts.Options.Point
        {
            Name = "Severity5",
            Y = Convert.ToInt32(s5),
            Sliced = true,
            Color = ColorTranslator.FromHtml("#FF0000")
        });
        series.Add(new DotNet.Highcharts.Options.Point
        {
            Name = "Severity4",
            Y = Convert.ToInt32(s4),
            Sliced = true,
            Color = ColorTranslator.FromHtml("#FF6666")
        });
        series.Add(new DotNet.Highcharts.Options.Point
        {
            Name = "Severity3",
            Y = Convert.ToInt32(s3),
            Sliced = true,
            Color = ColorTranslator.FromHtml("#FF3333")
        });
        series.Add(new DotNet.Highcharts.Options.Point
        {
            Name = "Severity2",
            Y = Convert.ToInt32(s2),
            Sliced = true,
            Color = ColorTranslator.FromHtml("#FF9999")
        });
        series.Add(new DotNet.Highcharts.Options.Point
        {
            Name = "Severity1",
            Y = Convert.ToInt32(s1),
            Sliced = true,
            Color = ColorTranslator.FromHtml("#FFCCCC")
        });
        string[] myCs = { "Level 5", "Level 4", "Level 3", "Level 2", "Level 1" };
        Highcharts chart = new Highcharts("Severities")
            .SetTitle(new Title() { Text = "" })
            .SetXAxis(new XAxis
            {
                Categories = myCs
            })
            .SetPlotOptions(new PlotOptions
            {

                Column = new PlotOptionsColumn
                {
                    AllowPointSelect = true,
                    Cursor = Cursors.Pointer,

                    ShowInLegend = true,
                    DataLabels = new PlotOptionsColumnDataLabels
                    {
                        Color = ColorTranslator.FromHtml("#000000"),
                        Formatter = "function() { return this.y;}",

                    },

                }

            })

            .SetSeries(new Series
            {
                Type = ChartTypes.Column,
                Name = "Severity Count",
                Data = new Data(series.ToArray())
            });


        return PartialView("_ChartPartial", chart);

    }

Answer 1

Мы должны добавить клик в SetPlotOptions.когда мы нажимаем на график, он вызывает функцию showdetails.showdetails - это Java-функция, определенная в представлении (индекс). Это сработало для меня.

  .SetPlotOptions(new PlotOptions
            {

                Column = new PlotOptionsColumn
                {
                    AllowPointSelect = true,
                    Cursor = Cursors.Pointer,
                    ShowInLegend = true,
                    DataLabels = new PlotOptionsColumnDataLabels
                    {
                        Color = ColorTranslator.FromHtml("#000000"),
                        Formatter = "function() { return this.y;}"

                    },
                    Point = new PlotOptionsColumnPoint() { Events = new PlotOptionsColumnPointEvents() { Click = "function(e) { showDetails(this.name); }" } }
                }

            })

Answer 2

Вы можете использовать chart.events.click событие.Срабатывает при нажатии на фон сюжета.Информация о выбранном месте может быть найдена через event.xAxis и event.yAxis.Проверьте демо в чистом JS.

Код:

// create the chart
Highcharts.chart('container', {
  chart: {
    events: {
      click: function(event) {
        var label = this.renderer.label(
            'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
            event.xAxis[0].axis.toPixels(event.xAxis[0].value),
            event.yAxis[0].axis.toPixels(event.yAxis[0].value)
          )
          .attr({
            fill: Highcharts.getOptions().colors[0],
            padding: 10,
            r: 5,
            zIndex: 8
          })
          .css({
            color: '#FFFFFF'
          })
          .add();

        setTimeout(function() {
          label.fadeOut();
        }, 1000);
      }
    }
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Демоверсия:

• https://jsfiddle.net/BlackLabel/dbqpou4v/

Справочник по JS API:

• https://api.highcharts.com/highcharts/chart.events.click

Справочник по .NET API:

• http://dotnet.highcharts.com/Help/Highcharts/html/class_highsoft_1_1_web_1_1_mvc_1_1_charts_1_1_chart_events.html#a87a3128090852777824e4118123a2579