如何将单词和数字放入使用chart.js制作的图表的条形图中？

问题描述 投票：0回答：1

我想像摄影一样设计图表。问题是，我不知道如何在栏中放置一些标签！而且我也不想露面。而且我也想像变量一样放置数字，因为此图表是我的计算器计算得出的结果，这可能吗？

I want the chart exactly like this!

<html>
<body>
<div id="chartContainer" style="height: 370px; width: 100;"></div>
</body>

<script>
//--------------------------------------CHART---------------
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{
        text: "Das können Sie beim Widerspruch einer Lebensversicherung herausholen:",
        fontFamily: "arial black",
        fontColor: "#695A42"
    },
    axisX: {
        display: false,
        interval: 1,
        intervalType: "year"
    },
    axisY:{
        display: false,
        valueFormatString:"$#0bn",
        gridColor: "#B6B1A8",
        tickColor: "#B6B1A8"
    },
    toolTip: {
        shared: false
    },
    data: [{
            type: "stackedColumn",
            showInLegend: true,
            color: "#134d59",
            name: "Q1",
            dataPoints: [
            { y: 6.75, x: new Date(2010,0) },
            { y: 8.57, x: new Date(2011,0) },
            { y: 10.64, x: new Date(2012,0) }
        ]
        },
        {        
            type: "stackedColumn",
            showInLegend: true,
            name: "Q2",
            color: "#e53011",
            dataPoints: [
            //  { y: 6.82, x: new Date(2010,0) },
                { y: 9.02, x: new Date(2011,0) },
            //  { y: 11.80, x: new Date(2012,0) }

            ]
        },
        {        
            type: "stackedColumn",
            showInLegend: true,
            name: "Q3",
            color: "#92c13f",
            dataPoints: [
            //  { y: 7.28, x: new Date(2010,0) },
            //  { y: 9.72, x: new Date(2011,0) },
                { y: 13.30, x: new Date(2012,0) }
            ]
        }]
});
chart.render();

function toolTipContent(e) {
    var str = "";
    var total = 0;
    var str2, str3;
    for (var i = 0; i < e.entries.length; i++){
        var  str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\"> "+e.entries[i].dataSeries.name+"</span>: $<strong>"+e.entries[i].dataPoint.y+"</strong>bn<br/>";
        total = e.entries[i].dataPoint.y + total;
        str = str.concat(str1);
    }
    str2 = "<span style = \"color:DodgerBlue;\"><strong>"+(e.entries[0].dataPoint.x).getFullYear()+"</strong></span><br/>";
    total = Math.round(total * 100) / 100;
    str3 = "<span style = \"color:Tomato\">Total:</span><strong> $"+total+"</strong>bn<br/>";
    return (str2.concat(str)).concat(str3);
}

}
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</html>

https://jsfiddle.net/c74wtx5n/

javascript chart.js
1个回答
0
投票

要在条形图中提供标签，您需要在数据集中添加以下内容。

indexLabel:"{y} $",
indexLabelPlacement: "inside",

对于隐藏轴及其标签，请在轴选项中添加以下内容

gridThickness: 0,
lineThickness: 0,
labelFormatter: function(e){
            return  "";
    },
tickLength: 0,

我修改了您的Jsfiddle，这是您的解决方案的link

如果要了解有关canvasJs定制的更多信息，请转到here。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.