WPF LiveCharts柱状图设置列透明度及Y轴线可见性问题

操作步骤 #

• 恢复Y轴可见性：删除Y轴<lvc:Axis>节点上的Opacity="0.2"属性，该属性会让整个Y轴（包含轴线、分隔线、刻度文字）整体变透明，移除后Y轴元素即可正常显示。
• 设置柱状列透明度：直接修改每个StackedColumnSeries的Fill属性值，将原有6位RGB颜色码升级为8位ARGB颜色码，前两位为透明度通道，取值范围00（全透明）~FF（全不透明），例如需要50%透明度就添加前缀80，30%透明度就添加前缀4D。

修改后的代码示例 #

Y轴部分 #

<lvc:CartesianChart.AxisY>
    <!-- 移除了Opacity="0.2"属性 -->
    <lvc:Axis MinValue="0" MaxValue="500">
        <lvc:Axis.Sections>
            <lvc:AxisSection Opacity=".2"/>
        </lvc:Axis.Sections>
        <lvc:Axis.Separator>
            <lvc:Separator Step="50" Stroke="Gray"/>
        </lvc:Axis.Separator>
    </lvc:Axis>
</lvc:CartesianChart.AxisY>

柱状系列部分（示例为50%透明度） #

<lvc:StackedColumnSeries Name="Column1" StackMode="Values" Fill="#808b6cc6" MaxColumnWidth="40" Values="10,20,30,40,50,60,70,80,90,50,110,120,130,140,150"></lvc:StackedColumnSeries>
<lvc:StackedColumnSeries Name="Column2" StackMode="Values" Fill="#80ca5982" MaxColumnWidth="40" Values="10,20,30,40,50,60,70,80,90,50,110,120,130,140,150"></lvc:StackedColumnSeries>
<lvc:StackedColumnSeries Name="Column3" StackMode="Values" Fill="#80c3903f" MaxColumnWidth="40" Values="10,20,30,40,50,60,70,80,90,50,110,120,130,140,150"></lvc:StackedColumnSeries>
<lvc:StackedColumnSeries Name="Column4" StackMode="Values" Fill="#804c9fcb" MaxColumnWidth="40" Values="10,20,30,40,50,60,70,80,90,50,110,120,130,140,150"></lvc:StackedColumnSeries>
<lvc:StackedColumnSeries Name="Column5" StackMode="Values" Fill="#8077d656" MaxColumnWidth="40" Values="10,20,30,40,50,60,70,80,90,50,110,120,130,140,150"></lvc:StackedColumnSeries>

原效果参考 #

内容的提问来源于stack exchange，提问作者Yun