使用圖表專家的條形圖中的圖例對齊

我正在嘗試爲圖表創建使用圖表專家的圖例，我使用圖表插件作爲圖例，但我無法將其對齊到圖表底部，任何人都可以提供輸入關於如何定製。（我已經在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

使用圖表專家的條形圖中的圖例對齊

回答

相關問題