Jqplot, разделить динамическую диаграмму

У меня есть диаграмма с 12 значениями, и я хочу разбить ее на 3 диаграммы, каждая из которых имеет 4 значения. Таким образом, у меня может быть 4 диаграммы. Список массивов динамический.

$(document).ready(function(){
        var s1 = [2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10];
        var s2 = [7, 5, 3, 2,7, 5, 3, 2,7, 5, 3, 2];
        var s3 = [14, 9, 3, 8,14, 9, 3, 8,14, 9, 3, 8];
  	    var s4 = [15, 8, 2, 10,15, 8, 2, 10,15, 8, 2, 10,];

        plot3 = $.jqplot('chart3', [s1, s2, s3, s4], {
            stackSeries: true,
            captureRightClick: true,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {
                    highlightMouseDown: true   
                },
                pointLabels: {show: true}
            },
            legend: {
                show: true,
                location: 'e',
                placement: 'outside'
            }      
        });
     
        $('#chart3').bind('jqplotDataRightClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        ); 
    });

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.enhancedPieLegendRenderer.min.js"></script>

    <link type = "text/css" rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" />

<div  id = "chart3"></div>

И вопрос, как я могу это сделать? у меня есть массив, который выглядит так:

 array(0 => array(0 => array(0 => 2,1 => 6,2 => 7,3 => 10)),//this will be the first diagram
       1 => array(0 => array(0 => 7,1 => 5,2 => 3,3 => 2)),// this the second       
       2 => array(0 => array(0 => 14,1 => 9,2 => 3,3 => 14)),//this the third
       3 => array(0 => array(0 => 15,1 => 8,2 => 2,3 => 10))//this the fourth
       );

Список динамичный. Кто-нибудь может мне с этим помочь?

так что этот массив php представлен на вашей кодовой странице jquery ??

— 01.05.2018 13:03

@AlivetoDie да

— 01.05.2018 13:03

javascript jquery jqplot

01.05.2018 13:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно перебрать свой массив и создать диаграмму на основе данных каждого подмассива, как показано ниже: -

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>

<script language = "javascript" type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.enhancedPieLegendRenderer.min.js"></script>

<link type = "text/css" rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" />

<?php
$array = array(
            0 => array(
                    0 => array(
                        2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10
                )
            ),
            1 => array(
                    0 => array(
                        7, 5, 3, 2,7, 5, 3, 2,7, 5, 3, 22
                )
            ),
            2 => array(
                    0 => array(
                        14, 9, 3, 8,14, 9, 3, 8,14, 9, 3, 8
                )
            ),3 => array(
                    0 => array(
                        15, 8, 2, 10,15, 8, 2, 10,15, 8, 2, 10,
                    )
            ),4 => array(
                    0 => array(
                        12, 18, 2, 0,1, 8, 2, 7,6, 8, 2, 21,
                    )
            )
       );


foreach($array as $key=> $arr){?>
<div  id = "chart<?php echo $key;?>"></div>
<script type = "text/javascript">

$(document).ready(function(){

        plot3 = $.jqplot('chart<?php echo $key;?>', <?php echo json_encode($arr); ?>, {
            stackSeries: true,
            captureRightClick: true,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {
                    highlightMouseDown: true   
                },
                pointLabels: {show: true}
            },
            legend: {
                show: true,
                location: 'e',
                placement: 'outside'
            }      
        });

        $('#chart<?php echo $key;?>').bind('jqplotDataRightClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        ); 
    });

</script>

<?php } ?>

как я уже сказал, у меня есть динамический список, что означает, что я могу когда-нибудь иметь массив с 3 или с 2, 1 ... и вопрос был в том, как я могу сделать диаграмму в jquery, например массив foreach, если установлен ...

— 01.05.2018 13:09

есть, но это не означает, что диаграмма должна иметь только 4, список массивов является динамическим, у меня может быть также 5 или 6 списков, и я хочу, чтобы список foreach был диаграммой.

— 01.05.2018 13:17

01.05.2018 13:06