c# - 在 DOT NET High Chart 中使用 CSS 类更改 PlotOptionsBar

Question

我正在使用来自 Dot Net High Chart 的堆叠条形图，我想使用CSS将条形图框更改为三角形，我在 Formatter 中尝试过，但它不起作用。我正在使用 ASP.NET 和 c#，我可以在哪里使用 CSS？还有其他方法吗？

这是我的图表代码

.SetPlotOptions(new PlotOptions


              {
                  Bar = new PlotOptionsBar
                  {
                      Stacking = Stackings.Percent,
                      BorderWidth = 2,
                      BorderColor = System.Drawing.Color.Coral,
                      Shadow = true,
                      DataLabels = new PlotOptionsBarDataLabels
                      {
                          Enabled = true,
                          Formatter = "function() { return this.series.name; }",
                          Color = System.Drawing.Color.Black,
                          Style = "fontSize: '13px', fontFamily: 'Verdana', fontBold: 'true', color: 'Black'"

                      },

                      PointWidth = 35,

                      Point = new PlotOptionsBarPoint { },
                  }


              })

Answer 1

不幸的是，这是不可能的，因为 Highcharts 在 SVG / VML 中返回图表，所以使用 CSS 是不正确的。您可以尝试使用散点系列，包括三角形标记。

http://api.highcharts.com/highcharts#plotOptions.area.marker.symbol http://www.highcharts.com/demo/scatter

Answer 2

这可能对像我这样的人有帮助:)

.SetPlotOptions(new PlotOptions
              {
                  Bar = new PlotOptionsBar
                  {
                      Stacking = Stackings.Percent,
                      BorderWidth =0,
                      BorderColor = System.Drawing.Color.Gray,
                      Shadow = false,

                      DataLabels = new PlotOptionsBarDataLabels
                      {
                          Enabled = true,
                          Formatter = "function() { return '<div class=\"Test\"/></br>&nbsp;&nbsp;&nbsp;&nbsp;'+this.series.name;}",
                          Color = System.Drawing.Color.Black,
                          UseHTML=true,
                          Style = "fontSize: '12px', fontFamily: 'Arial', fontBold: 'true', color: 'Black'"
                      },
                      PointWidth = 35,
                      Point = new PlotOptionsBarPoint { },
                  }
              })

CSS 代码：对于测试类：

 .Test {
        height:35px;
        width:80px;
        background-image:url("../../Images/Arrow.gif");
        background-size:cover;
        vertical-align:central;
        text-align:center;
        align-content:center;
        font-size:smaller;
        color:black;
    }

我的图像是这个图像作为白色所在的转移背景。

最后我得到了这个：