MVC中的.NET Highcharts

Question

我是.NET新手，在MVC中使用dotnet highcharts。我的任务是在点击图表时，我应该根据点击的xaxis值显示包含相关数据的表格。单击图形时，我想获取所选的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

你可以使用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

Answer 2

我们应该在SetPlotOptions中添加click。当我们点击图表时，它正在调用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); }" } }
                }

            })