用一个ajax调用填充三个高图形

Question

我想弄清楚如何将3个ajax调用合并为1，但到目前为止我没有找到正确的方法来做到这一点。我有以下三个highcharts：

chart1 = new Highcharts.Chart({ 
       chart: { 
        height: 155, 
        renderTo: 'chart1_div', 
        defaultSeriesType: 'spline', 
        events: { 
         load: GetData1(date) 
        } 
       }, 
       plotOptions: { 
        series: { 
         fillOpacity: 0.1 
        } 
       }, 
       xAxis: { 
        categories: c, 
        labels: { 
         staggerLines: 2 
        } 
       }, 
       yAxis: { 
        gridLineColor: "#ffffcc", 
        title: { 
         text: '' 
        }, 
        labels: { 
         x: 15, 
         y: 15, 
         style: { 
          color: "#999999", 
          //fontWeight: "bold", 
          fontSize: "10px" 
         } 
        }, 
       }, 
       series: [{ 
        name: 'Chart1', 
        color: "#6bd9ec", //37f312 
        data: chart1_data 
       }] 
      }); 


chart2 = new Highcharts.Chart({ 
        chart: { 
         height: 155, 
         renderTo: 'chart2_div', 
         defaultSeriesType: 'spline', 
         events: { 
          load: GetData2(date) 
         } 
        }, 
        plotOptions: { 
         series: { 
          fillOpacity: 0.1 
         } 
        }, 
        xAxis: { 
         categories: c, 
         labels: { 
          staggerLines: 2 
         } 
        }, 
        yAxis: { 
         gridLineColor: "#ffffcc", 
         title: { 
          text: '' 
         }, 
         labels: { 
          x: 15, 
          y: 15, 
          style: { 
           color: "#999999", 
           //fontWeight: "bold", 
           fontSize: "10px" 
          } 
         }, 
        }, 
        series: [{ 
         name: 'Chart2', 
         color: "#6bd9ec", //37f312 
         data: chart2_data 
        }] 
       }); 


chart3 = new Highcharts.Chart({ 
         chart: { 
          height: 155, 
          renderTo: 'chart3_div', 
          defaultSeriesType: 'spline', 
          events: { 
           load: GetData3(date) 
          } 
         }, 
         plotOptions: { 
          series: { 
           fillOpacity: 0.1 
          } 
         }, 
         xAxis: { 
          categories: c, 
          labels: { 
           staggerLines: 2 
          } 
         }, 
         yAxis: { 
          gridLineColor: "#ffffcc", 
          title: { 
           text: '' 
          }, 
          labels: { 
           x: 15, 
           y: 15, 
           style: { 
            color: "#999999", 
            //fontWeight: "bold", 
            fontSize: "10px" 
           } 
          }, 
         }, 
         series: [{ 
          name: 'Chart3', 
          color: "#6bd9ec", //37f312 
          data: chart3_data 
         }] 
        }); 

目前我正在三个不同的Ajax调用：

function GetData1(date) { 
      $.ajax({ 
       url: '/GetAjaxCall', 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       data: JSON.stringify({ date: date }), 
       success: function (f) { 
        var cat= []; 
        var ser= []; 
        $.each(f.d, function (i, e) { 
         cat.push(e.date); 
         ser.push(parseInt(e.val1)); 
        }); 
        chart1_div.xAxis[0].setCategories(cat); 
        chart1_div.series[0].setData(ser); 
       }, 
       error: function (e) { 
        alert(e.statusText); 
       }, 
       cache: false 
      }); 
     } 

function GetData2(date) { 
       $.ajax({ 
        url: '/GetAjaxCall', 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify({ date: date }), 
        success: function (f) { 
         var cat= []; 
         var ser= []; 
         $.each(f.d, function (i, e) { 
          cat.push(e.date); 
          ser.push(parseInt(e.val2)); 
         }); 
         chart2_div.xAxis[0].setCategories(cat); 
         chart2_div.series[0].setData(ser); 
        }, 
        error: function (e) { 
         alert(e.statusText); 
        }, 
        cache: false 
       }); 
      } 

function GetData3(date) { 
       $.ajax({ 
        url: '/GetAjaxCall', 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify({ date: date }), 
        success: function (f) { 
         var cat= []; 
         var ser= []; 
         $.each(f.d, function (i, e) { 
          cat.push(e.date); 
          ser.push(parseInt(e.val3)); 
         }); 
         chart3_div.xAxis[0].setCategories(cat); 
         chart3_div.series[0].setData(ser); 
        }, 
        error: function (e) { 
         alert(e.statusText); 
        }, 
        cache: false 
       }); 
      } 

正如你所看到的，我现在做同样的Ajax调用3次刚能够以不同的方式填充3个图表。有谁知道我怎么能生成完全相同的3个图表，但只做1个Ajax调用？非常感谢

喜欢的东西：

function GetDataAll(date) { 
       $.ajax({ 
        url: '/GetAjaxCall', 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify({ date: date }), 
        success: function (f) { 
         var cat1= []; 
         var ser1= []; 
         var cat2= []; 
         var ser2= []; 
         var cat3= []; 
         var ser3= []; 
         $.each(f.d, function (i, e) { 
          cat1.push(e.date); 
          ser1.push(parseInt(e.val1)); 
         }); 
         chart1_div.xAxis[0].setCategories(cat1); 
         chart1_div.series[0].setData(ser1); 
         chart2_div.xAxis[0].setCategories(cat2); 
         chart2_div.series[0].setData(ser2); 
         chart3_div.xAxis[0].setCategories(cat3); 
         chart3_div.series[0].setData(ser3); 
        }, 
        error: function (e) { 
         alert(e.statusText); 
        }, 
        cache: false 
       }); 
      } 

根据负载情况下我可以打电话给GetData1（日期）为3点的图表，但这种方式我会打Ajax调用的3倍。我可能是这样做的错误方式，必须是一种更有效的方式。我欢迎任何的想法，太感谢你了

编辑 - 这一工程对@WERGELD HELP

var chart1_options = { 
    chart: { 
      renderTo: 'chart1_div', 
    xAxis: { 
      categories: [] 
    }, 
    series: [{ 
      name: 'Chart1', 
      color: "#6bd9ec" 
      }] 
    }; 

var chart2_options = { 
    chart: { 
      renderTo: 'chart2_div', 
    xAxis: { 
      categories: [] 
    }, 
    series: [{ 
      name: 'Chart2', 
      color: "#6bd9ec" 
      }] 
    }; 

var chart3_options = { 
    chart: { 
      renderTo: 'chart3_div', 
    xAxis: { 
      categories: [] 
    }, 
    series: [{ 
      name: 'Chart3', 
      color: "#6bd9ec" 
      }] 
    }; 

function GetDataAll(date) { 
$ajax({.. 

         chart1_options.xAxis.categories = cat1; 
         chart1_options.series[0].data = ser1; 

         chart2_options.xAxis.categories = cat2; 
         chart2_options.series[0].data = ser2; 

         chart3_options.xAxis.categories = cat3; 
         chart3_options.series[0].data = ser3; 

         var chart1 = new Highcharts.Chart(Highcharts.merge(options, chart1_options)); 
         var chart2 = new Highcharts.Chart(Highcharts.merge(options, chart2_options)); 
         var chart3 = new Highcharts.Chart(Highcharts.merge(options, chart3_options)); 

}); 
} 

Answer 1

设在这里的最新更新是一些伪代码，让你去。你需要做的是建立一个包含您的图表中的所有常数项的图表选择对象：

var options = { 
    chart: { 
     height: 155, 
     defaultSeriesType: 'spline' 
    }, 
    plotOptions: { 
     series: { 
     fillOpacity: 0.1 
     } 
    }, 
    xAxis: { 
     categories: c, 
     labels: { 
     staggerLines: 2 
     } 
    }, 
    yAxis: { 
     gridLineColor: "#ffffcc", 
     title: { 
     text: '' 
     }, 
     labels: { 
     x: 15, 
     y: 15, 
     style: { 
      color: "#999999", 
      //fontWeight: "bold", 
      fontSize: "10px" 
     } 
     }, 
    } 
    }; 

接下来你做你的Ajax调用并分配系列的数据和标题（和任何其他物品），并创建你要创建的每个图表的对象：

var chartOptions1 = { 
    chart: { renderTo: 'container1' }, 
    series: [] 
}; 

var chartOptions2 = { 
    chart: { renderTo: 'container1' }, 
    series: [] 
}; 

接下来你做你的代码，以获得您想要为每个图表，我不会进入这里的图表数据/名/等。下一步就是再从合并选项创建图表：

var chart1 = new Highcharts.Chart(Highcharts.merge(options, chartOptions1)); 
var chart2 = new Highcharts.Chart(Highcharts.merge(options, chartOptions2)); 

这应该这样做。再一次，它是伪代码，但你明白了。全球选项+ merge是你的朋友。完整伪代码here。