weixin_44816039
云木one
2019-05-06 16:54

在chart.js中,通过比较数值的大小赋予柱状图不同颜色

  • html5
  • javascript
  • jquery

在chart.js中,通过比较数值的大小赋予柱状图不同颜色,这个应该是怎么加一个判断语句,是使用if..return..吗,比如大于某一值就赋予一种颜色

// Create the chart

Highcharts.chart('gongzhuangjiancha', {
            chart: {
                type: 'column'
            },
    credits:{
        enabled: false 
    },
            title: {
                text: ''
            },

            xAxis: {
                type: 'category'
            },
    yAxis: {
        max: 100,
        min:50,
    },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.1f}%'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px"></span><br>',
                pointFormat: '<span style="color:{green}">{point.name}</span>: <b>符合率为{point.y:.2f}%</b><br/>'
            },

            series: [
                {
                    name: "Browsers",
                    colorByPoint:false ,
                    color:"green",
                    data: [
                        {
                            name: "前车体1#",
                            y: 88,
                            drilldown: "前车体1#"
                        },
                        {
                            name: "前车体2#",
                            y: 90,
                            drilldown: "前车体2#"
                        },
                        {
                            name: "前车体3#",
                            y: 87,
                            drilldown: "前车体3#"
                        },
                        {
                            name: "前车体4#",
                            y: 89,
                            drilldown: "前车体4#"
                        },
                        {
                            name: "前车体5#",
                            y: 95,
                            drilldown: "前车体5#"
                        },

                    ]
                }
            ],
  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

1条回答

为你推荐

换一换