Question

我正在构建一个Web应用程序，其中用户需要网页中的数据，后端获取数据并将其传递给前端。因此，每次用户需要新设置数据时，新行将插入到图表中。但问题是每条线都是相同的颜色，并且它们相互重叠使得很难定义。我想每次插入一组新数据时，Highcharts会自动设置不同的颜色。我尝试在前端接收数据时手动设置颜色，但它不起作用。有人可以帮帮我吗？非常感谢！

的script.js：

$(document).ready(function() {
    var colorCnt = 0;
    var options = {
            chart: {
                    renderTo: containerSpline,
                    type: 'spline',
                },
            title: {
                text: '信息录入统计曲线图'
            },
            credits: {
                enabled: false
            },
            xAxis: {
                title: {
                    text: '时间'
                },
                categories: []
            },
            yAxis: {
                title: {
                    text: '数量'
                }
            },
            series: []
    };



    $.get("//localhost:5050", (data)=>{
        // feed the default data when the web page is firstly loaded
        var series = {
            name:'', 
            data: []
            };
        var xAxis = {
                categories: []
            };
        data.recordset.forEach((item)=>{
            series.data.push(item.Count);
            series.name = item.Dates;
            options.xAxis.categories.push(item.Times);
        })
        options.series.push(series);
         var chart = new Highcharts.Chart(options); 
    })

    $('button').click(()=>{
        // feed the required data by the user
        var obj = {
            year: $('#year').val(),
            month: $('#month').val(),
            day: $('#day').val()
        }

        $.post('//localhost:5050',obj, (data)=>{
            options.chart.colorCount = options.chart.colorCount+1;
            var series = {
            name:'', 
            data: []
            };
            var xAxis = {
                    categories: []
                };
            console.log(data.recordsets);
            data.recordset.forEach((item)=>{
                series.data.push(item.Count);
                series.name = item.Dates;
                options.xAxis.categories.push(item.Times);
            })
            options.series.push(series);
            var chart = new Highcharts.Chart(options); 
        })
    });
})

的index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>信息录入统计</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="pageheader">
        <h1>信息录入统计</h1>
    </div>
    <div class="jumbotron">
        <div id="container">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="查询年份" aria-describedby="basic-addon2" id="year">
                <span class="input-group-addon" id="basic-addon2">年</span>
                <input type="text" class="form-control" placeholder="查询月份" aria-describedby="basic-addon2" id="month">
                <span class="input-group-addon" id="basic-addon2">月</span>
                <input type="text" class="form-control" placeholder="查询日期" aria-describedby="basic-addon2" id="day">
                <span class="input-group-addon" id="basic-addon2">日</span>
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">查询</button>
                </span>
            </div>
            <div class="chart", id="containerSpline"></div>
        </div>
    </div>
<!-- <div id="containerSpline"></div> -->
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src='highcharts.js'></script>
<script src="highcharts-more.js"></script>
<!-- <script src="data.js"></script> -->
<script src='script.js'></script>
</body>
</html>

Answer 1

我自己解决了这个问题。基本上，每次插入一组新数据时，我仍然手动设置系列的颜色。我在发布问题之前做了这个并且失败了，因为我没有在系列中设置颜色属性。

我编写了一个根据索引返回不同颜色的函数，每次插入一组新数据时都会调用它。

var switchColor = (cnt) => {
    var colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
    return colors[cnt];
}


$(document).ready(function() {
    var colorCnt = 1;
    var options = {
            chart: {
                    renderTo: containerSpline,
                    type: 'spline',
                },
            title: {
                text: '信息录入统计曲线图'
            },
            credits: {
                enabled: false
            },
            xAxis: {
                title: {
                    text: '时间'
                },
                categories: []
            },
            yAxis: {
                title: {
                    text: '数量'
                }
            },
            series: [{
                name:'',
                data:[]
            },
            ]
    };


// show the default data when the web page is firstly loaded
    $.get("//localhost:5050", (data)=>{
        var series = {
            name:'', 
            data: []
            };
        var xAxis = {
                categories: []
            };
        data.recordset.forEach((item)=>{
            series.data.push(item.Count);
            series.name = item.Dates;
            options.xAxis.categories.push(item.Times);
        })
        options.series[0].data = series.data;
        options.series[0].name = series.name;
        var chart = new Highcharts.Chart(options); 
    })

// feed the required data into the chart
    $('#query').click(()=>{
        var obj = {
            year: $('#year').val(),
            month: $('#month').val(),
            day: $('#day').val()
        }

        $.post('//localhost:5050',obj, (data)=>{
            options.chart.colorCount++;
            var series = {
            name:'', 
            data: [],
            color: switchColor(colorCnt++),
            };
            var xAxis = {
                    categories: []
                };
            console.log(data.recordsets);
            data.recordset.forEach((item)=>{
                series.data.push(item.Count);
                series.name = item.Dates;
                options.xAxis.categories.push(item.Times);
            })

            options.series.push(series);

            var chart = new Highcharts.Chart(options); 
        })
    });

// clear the search history
    $('#clear').click(() => {
        options.series = [{
            name: '',
            data: []
        }]

        var chart = new Highcharts.Chart(options); 
        colorCnt = 0;
    })
})

highcharts在动态插入数据时更改系列颜色

1 个答案: