Question

我是条形图的新手，这是我的代码检查一次

{{1}}

这是我的问题，我需要基于

之类的值的条形颜色

50（下）->绿色

51-100（中间）->蓝色

101（上方）->橙色

Kinldy在这方面帮助我。谢谢桑迪普

Answer 1

            window.onload = function () {
                var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light1", // "light1", "light2", "dark1", "dark2"
                //title:{
                    //text: "Simple Column Chart with Index Labels"
                //},
                axisX: {
                    //prefix: "$",
                    suffix:  "hr"
                },
                data: [{
                    //type: "bar",
                    type: "column", //change type to bar, line, area, pie, etc
                    //indexLabel: "{y}", //Shows y value on all Data Points
                    indexLabel: "{label} {y}",
                    yValueFormatString: "#,##0",
                    indexLabelFontColor: "#5A5757",
                    indexLabelPlacement: "outside",   
                    dataPoints: [
                        {"x":1,"y":41},
                    {"x":2,"y":55},
                    {"x":3,"y":101}
                    ]
                }]
            });
            setColor(chart);
            chart.render();

            }

            function setColor(chart){
                for(var i = 0; i < chart.options.data.length; i++) {
                dataSeries = chart.options.data[i];
                for(var j = 0; j < dataSeries.dataPoints.length; j++){
                    if(dataSeries.dataPoints[j].y < 50){
                    dataSeries.dataPoints[j].color = 'green';
                    } if(dataSeries.dataPoints[j].y >= 50){
                    dataSeries.dataPoints[j].color = 'blue';
                } if(dataSeries.dataPoints[j].y >= 101) {
                    dataSeries.dataPoints[j].color = 'orange';
                }
                }
            }
        }

我希望这对您有用：-）

如何根据值更改条形图颜色

1 个答案: