Highchart с использованием javascript для отображения в каждой строке вида сетки с использованием элемента div - PullRequest
0 голосов
/ 13 февраля 2019

C # gridview имеет поле шаблона, которое содержит один div с идентификатором контейнера.У меня есть следующий javascript, который создает график старшей диаграммы и помещает график в этот div на передний конец.По какой-то причине график отображается только в первой строке сетки, а не в каждой строке.Моя конечная цель состоит в том, чтобы отобразить график для каждой строки.Данные, которые использует график, извлекаются из базы данных и анализируются в javascript с использованием JSON.PARSE, и это работает нормально.Мне нужно, чтобы график выводился в каждой строке вида сетки:

JS:

function CreateBoxPlot() {


var hv = $('#hiddenvariable').val();
alert(hv);

var chart;
var titleText = 'Test Chart Title';
var subTitleText = 'Test Chart Subtitle';
var type = 'boxplot';
var data = [JSON.parse(hv).map(item => parseInt(item))]; //Doesnt work in IE

console.log(data);

$(function () {
    $('#container').highcharts({
        chart: { type: type, inverted: true },
        title: { text: titleText },
        subtitle: { text: subTitleText },
        legend: { enabled: false },
        tooltip: {
            shared: true,
            crosshairs: true
        },
        plotOptions: {
            series: {
                pointWidth: 50
            }
        },

        xAxis: {
            visible: false

        },
        yAxis: {

            visible: true,
            title: {
                text: 'Values'
            },

            plotLines: [{
                value: 80,
                color: 'red',
                width: 2

            }]

        }
    });

    chart = $('#container').highcharts();
    chart.addSeries({ data: data });


});

}

ASPX:

                              <asp:TemplateField HeaderText="DaysGraph" HeaderStyle-Width="30%" >
                       <ItemTemplate>
                           <div id="container" >

                           </div>

                       </ItemTemplate>
                    </asp:TemplateField>

C #

SqlDataAdapter da = new SqlDataAdapter(cmd);
    cmd.CommandType = CommandType.StoredProcedure;
    cn.Open();
    SqlDataReader reader = cmd.ExecuteReader();


    var chartValues = new List<string>();
    var chartValues2 = new List<string>();

    string str = reader["ChartData"].ToString();

    string[] strList = str.Split(','); //seperate the hobbies by comma

    // convert it in json
    dataStr = JsonConvert.SerializeObject(strList, Formatting.None);

    hiddenvariable.Value = dataStr;

1 Ответ

0 голосов
/ 13 февраля 2019

Хорошо, причина в том, что вы добавили его в GridView, то есть повторите тот же идентификатор id="container", поэтому логично, что только первым является график.Поэтому, когда вы просите нанести данные на идентификатор, он находит только первый.

   <ItemTemplate>
       <div id="container" >
       </div>
   </ItemTemplate>

добавить разные идентификаторы в каждую строку базы для некоторого идентификатора базы данных, например: <div id="container1" >, <div id="container2" >, <div id="container3" >

альтернатива здесь

('#container').highcharts({

не используйте идентификатор, но добавьте некоторый класс и запишите их все, но вам все равно нужно добавить другую базу данных для некоторого идентификатора.


Решение

Как вы можете добавить некоторые параметры на стороне рендеринга, чтобы найти подходящие данные для каждой строки.
Прежде всего, визуализируйте div и добавьте некоторые данные внутрьчто вы получаете с помощью javascript.
Итак, в GridView вы добавляете

<asp:TemplateField HeaderText="header" >
    <ItemTemplate >
     <%#getDivContainer(Container.DataItem)%>
    </ItemTemplate>
</asp:TemplateField> 

, а затем в коде отправляете div с data-id

protected string getDateAndGraph(object oItem)
{
    // read the id from your data set
    var CurrentID = (int) DataBinder.Eval(oItem, "ID");

    return string.Format("<div id="container_{0}" class="graph" data-id="{0}"></div>", CurrentID);
}

теперь на javascriptсторона, вы передаете каждый из предыдущих элементов и размещаете на них правильные данные, основываясь на id

// init all of them
$(function () {
    $('.graph').highcharts({
        // init 
        chart: { type: type, inverted: true },
        title: { text: titleText },
        .... rest of .....
    })
});

// here you add the correct data to each line
$( ".graph" ).each(function( index, element ) { 
    chart = $(element).highcharts();

    // now read the id, and load the appropriate data
    MyDataID = $(element).data( "id" );
    var hv = $('#hiddenvariable' + MyDataID).val();
    var data = [JSON.parse(hv).map(item => parseInt(item))];

    chart.addSeries({ data: data });

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...