Highcharts动态集类别更新图表，但只显示点而不显示线 - Highcharts dynamic set category update the chart but shows only points but not lines

Highcharts dynamic set category update the chart but shows only points but not lines

本文关键字：显示动态更新 Highcharts | 更新日期: 2023-12-14

我有Highchart LINE类型的图，它正确地显示了折线图。我有一个动态更改数据的按钮。即第一张图表显示7天的数据。点击14天图表可以正确呈现数据，但我使用的时候。

function requestData(response,point){
...data fetching code......
var series = chart.series[0];
chart.series[1].setData(eval(oneArray),false,true);
chart.series[0].setData(eval(twoArray),false,true);
chart.xAxis[0].setCategories(json array, true,true);}

如果我删除chart.xAxis[0].setCategories(json array, true,true);，那么它会显示具有正确数据的行，但x轴只是数字，我必须用日期名称设置x轴。json数组显示全部正确。这是我的图表代码。

                   var chart;
                   chart = new Highcharts.Chart({
                   chart: {
                       renderTo: "progresschart",
                       type: "line",
                       events: {
                           load: requestData   
                       }
                   },
                   credits: {
                           enabled: false
                       },
                   title: {
                       text: "Calories Burned Vs Calorie Consumed"
                   },
                    xAxis: {
                           categories: [],
                           },
                   yAxis: {
                       title: {
                           text: "Calories"
                       },
                   },
                   series: [{
                       name: "Consumed",
                        data:[] 
                   },{
                       name: "Burned",
                        data:[] 
                   }],
                   exporting: {
                                enabled: false
                            }
              });
        });

首先，类别数组是：

["Thu,28th", "Fri,29th", "Sat,30th", "Sun,1st", "Mon,2nd", "Tue,3rd", "Wed,4th"]

要设置的类别数组为：

["Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"]

[1]系列：

[403.91604166667, 0, 0, 156.421875, 190.48708333333, 121.66145833333, 52.140625, 104.28125, 440.41447916667, 472.04645833334, 0, 178.3209375, 191.18229166666, 139.04166666667]

[2]系列：

[100, 112, 0, 0, 360, 330, 141, 150, 100, 0, 0, 0, 0, 0]

这可能是旧版本Highcharts中的错误，更新到3.0.7+应该可以解决这个问题。

工作示例：http://jsfiddle.net/24dXX/

代码：

    var arr = ["Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"],
        oneArray = "[403.91604166667, 0, 0, 156.421875, 190.48708333333, 121.66145833333, 52.140625, 104.28125, 440.41447916667, 472.04645833334, 0, 178.3209375, 191.18229166666, 139.04166666667]",
        twoArray = "[100, 112, 0, 0, 360, 330, 141, 150, 100, 0, 0, 0, 0, 0]";
    chart.series[1].setData(eval(oneArray), false, true);
    chart.series[0].setData(eval(twoArray), false, true);
    chart.xAxis[0].setCategories(arr, true, true);