@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();
}
  • Вопрос задан
  • 463 просмотра
Пригласить эксперта
Ответы на вопрос 1
alvvi
@alvvi
export default apathy;
Сначала вы задали один window.onload, а потом его переопредилили, естественно, когда событие load таки произошло сработал только второй.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
20 апр. 2024, в 13:56
7000 руб./за проект
20 апр. 2024, в 13:52
7000 руб./за проект
20 апр. 2024, в 13:23
1000 руб./за проект