@s-zhura

Как вывести несколько графиков Canvas?

Может кто устанавливал на сайте графики Canvas? Подскажите, не могу вывести несколько графиков одновременно. Отображается только один график.
Подключаю графики из внешнего файла js, либо вставляю между head - бесполезно.
На странице вывожу так: <div id="chartContainer"></div> и <div id="chartContainer-2"></div>

Подключаю из внешнего файла или между head вот эти два скрипта (они идентичные, разница лишь в цвете графиков и значениях.):
window. onload = function () {
    var chart= new CanvasJS.Chart("chartContainer-2", {

      animationEnabled: true, 
      zoomEnabled:true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      axisY:{
        includeZero: false,
        prefix: "$",
      gridColor: "#DDD",
      gridThickness: 1,
      gridDashType: "dot",
      tickThickness: 1,
      interval: 250,
        maximum: 1900
      },
     axisX:{      
            valueFormatString: "DD-MM-YY",
         gridColor: "#DDD",
         gridDashType: "dot",
         tickThickness: 1,
         gridThickness: 1
      },
    toolTip: {
        borderColor: "#61B057",
      backgroundColor: "#fbfbfb",
      borderThickness: 2,
      cornerRadius: 3,
      fontStyle: "normal",
      fontFamily: "tahoma"
      },
    data: [
      {
        type: "spline",
        markerSize: 8,
      markerColor: "#61B057",
      markerBorderColor: "#FFF",
        markerBorderThickness: 1,
      lineColor: "#61B057",
        toolTipContent: "{x} <strong>${y} <strong>",
        dataPoints: [
        { x: new Date(2017,06,01), y: 215.00 },
        { x: new Date(2017,06,02), y: 109.00 },
        { x: new Date(2017,06,03), y: 326.00 },
        { x: new Date(2017,06,04), y: 724.00 },
      { x: new Date(2017,06,05), y: 624.00 },
      { x: new Date(2017,06,06), y: 571.00 },
        { x: new Date(2017,06,07), y: 601.00 },
        { x: new Date(2017,06,08), y: 364.00 },
        { x: new Date(2017,06,09), y: 514.00 },
        { x: new Date(2017,06,10), y: 765.00 },
      { x: new Date(2017,06,11), y: 909.00 },
        { x: new Date(2017,06,12), y: 944.00 },
        { x: new Date(2017,06,13), y: 1186.00 },
        { x: new Date(2017,06,14), y: 1179.00 },
        { x: new Date(2017,06,18), y: 1182.00 },
      { x: new Date(2017,06,19), y: 989.00 },
        { x: new Date(2017,06,20), y: 1009.00 }
        ]
      }
      ]
    });
chart.render();
}  

window. onload = function () {
    var chart= new CanvasJS.Chart("chartContainer", {

      animationEnabled: true, 
      zoomEnabled:true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      axisY:{
        includeZero: false,
        prefix: "$",
      gridColor: "#DDD",
      gridThickness: 1,
      gridDashType: "dot",
      tickThickness: 1,
      interval: 250,
        maximum: 1900
      },
     axisX:{      
            valueFormatString: "DD-MM-YY",
         gridColor: "#DDD",
         gridDashType: "dot",
         tickThickness: 1,
         gridThickness: 1
      },
    toolTip: {
        borderColor: "#337ba7",
      backgroundColor: "#fbfbfb",
      borderThickness: 2,
      cornerRadius: 3,
      fontStyle: "normal",
      fontFamily: "tahoma"
      },
    data: [
      {
        type: "spline",
        markerSize: 8,
      markerColor: "#337ba7",
      markerBorderColor: "#FFF",
        markerBorderThickness: 1,
      lineColor: "#337ba7",
        toolTipContent: "{x} <strong>${y} <strong>",
        dataPoints: [
        { x: new Date(2017,06,01), y: 215.00 },
        { x: new Date(2017,06,02), y: 409.00 },
        { x: new Date(2017,06,03), y: 526.00 },
        { x: new Date(2017,06,04), y: 624.00 },
    { x: new Date(2017,06,05), y: 624.00 },
    { x: new Date(2017,06,06), y: 871.00 },
        { x: new Date(2017,06,07), y: 901.00 },
        { x: new Date(2017,06,08), y: 964.00 },
        { x: new Date(2017,06,09), y: 914.00 },
        { x: new Date(2017,06,10), y: 1065.00 },
    { x: new Date(2017,06,11), y: 1109.00 },
        { x: new Date(2017,06,12), y: 944.00 },
        { x: new Date(2017,06,13), y: 1186.00 },
        { x: new Date(2017,06,14), y: 1239.00 },
        { x: new Date(2017,06,18), y: 1382.00 },
    { x: new Date(2017,06,19), y: 1419.00 },
        { x: new Date(2017,06,20), y: 1419.00 }
        ]
      }
      ]
    });
chart.render();
}
  • Вопрос задан
  • 360 просмотров
Пригласить эксперта
Ответы на вопрос 1
alvvi
@alvvi
export default apathy;
Сначала вы задали один window.onload, а потом его переопредилили, естественно, когда событие load таки произошло сработал только второй.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы