使用图表专家的条形图中的图例对齐

我正在尝试为图表创建使用图表专家的图例，我使用图表插件作为图例，但我无法将其对齐到图表底部，任何人都可以提供输入关于如何定制。（我已经在CSS中使用它尝试，但不能反映我的变化。）使用图表专家的条形图中的图例对齐

HTML：

<chartist class="ct-chart ct-major-twelfth" 
    chartist-chart-type="Bar" 
    chartist-data="chartData" 
    chartist-chart-options="chartOptions"> 
</chartist>

JS：

chartData = { 
    labels: [], 
    series: [[]] 
}; 

chartOptions= { 
    plugins: [ 
     Chartist.plugins.legend() 
    ] 
};

legend.JS：

$ct-series-colors: (#d70206, #F05B4F, #F4C63D, #453D3F) !default; 

.ct-legend { 
    position: relative; 
    z-index: 10; 

    li { 
     position: relative; 
     padding-left: 23px; 
     margin-bottom: 3px; 
    } 

    li:before { 
     width: 12px; 
     height: 12px; 
     position: absolute; 
     left: 0; 
     content: ''; 
     border: 3px solid transparent; 
     border-radius: 2px; 
    } 

    li.inactive:before { 
     background: transparent; 
    } 

    &.ct-legend-inside { 
     position: absolute; 
     top: 0; 
     right: 0; 
    } 

    @for $i from 0 to length($ct-series-colors) { 
     .ct-series-#{$i}:before { 
      background-color: nth($ct-series-colors, $i + 1); 
      border-color: nth($ct-series-colors, $i + 1); 
     } 
    } 
}

也任何人都可以让我知道如何在bars.y上面添加y轴值尝试使用下面的css文件，但仍然无法获取标签（类似于Chartist.plugins.ctPointLabels），但似乎仅适用于折线图。

CSS：

.ct-chart .ct-bar { 
    stroke-width: 60px; 
} 

.ct-chart .ct-label, .ct-chart .ct-label.ct-horizontal { 
    text-align: center; 
} 

.ct-bar-label { 
    text-anchor: middle; 
    alignment-baseline: hanging; 
    fill: white; 
}

在此先感谢。

来源

2016-03-02 user1190615

你有没有找到你要找的东西，我有同样的需求。 – wilfriedrt

我也在寻找这个 –

它非常简单，但记录不完整。

Chartist.plugins.legend({ 
    position: 'bottom' 
});

请记住，您的图表SVG绝对是它的父母。所以你是传奇CSS也需要设置绝对位置。

对于更彻底的办法，更换chart.on('created', ...)

chart.on('created', function (data) { 
    // Append the legend element to the DOM 
    switch (options.position) { 
     case 'top': 
      chart.container.insertBefore(legendElement, chart.container.childNodes[0]); 
      break; 

     case 'bottom': 
      chart.container.parentNode.insertBefore(legendElement, null); 
      break; 
    } 
});

的关键是：

chart.container.parentNode.insertBefore(legendElement, null);

这将插入图例中的图表被包含内的元素之后。

快乐编码。

来源

2016-09-16 20:28:04 pimbrouwers

使用图表专家的条形图中的图例对齐

回答

相关问题