Хай-чарт, появляющийся на модальной стороне, смотрящий на строку сетки при нажатии кнопки - PullRequest
Новая
       14

Хай-чарт, появляющийся на модальной стороне, смотрящий на строку сетки при нажатии кнопки

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

У меня есть вид сетки asp.net с полем шаблона, который включает кнопку в каждой строке.Эта кнопка имеет атрибут data-target, который открывает модальное окно.Модал включает в себя один div, который идентифицирует контейнер.Этот div должен отображать график в виде верхней диаграммы на основе данных в виде сетки.У меня есть столбец с описанием. Я хочу, чтобы это был заголовок. У меня также есть столбец с данными диаграммы.Пример первого ряда - 2,6,10,13,17, который будет отправлен как данные для построения.Если я жестко закодирую поле, сюжет работает нормально.Мне нужно, чтобы он посмотрел на конкретную строку и график в зависимости от того, какая кнопка нажата.Функция для создания блочного графика представлена ​​в javascript и в настоящее время выполняется при загрузке страницы.

У меня есть метод нажатия кнопки, который извлекает данные из таблицы и сохраняет их в переменной.Если я тогда вызову следующий метод SerializedBoxChart ();который извлекает данные из строки Ito JSON, а затем устанавливает скрытую переменную в качестве этого значения.Когда я запускаю код, окно графика не запускается вообще.Если я переместить SerializedBoxChart ();в страницу загрузки кода на c # и измените метод так, чтобы он запускался непосредственно в базе данных, он просматривал каждую строку и отображал последнюю строку для всех строк, что не то, что я хочу.Я хочу построить график в зависимости от строки, которую я нажимаю.

ASP.NET: 

<asp:TemplateField HeaderText="AvgDaysTaken" SortExpression="AvgDaysTaken">
    <itemtemplate>
        <asp:Button type="button" runat="server" id="AvgDaysTaken" class="btn btn-primary" data-toggle="modal" data-target="#myBoxPlot"  Text='<%# Eval("AvgDaysTaken") %>' />
    </itemtemplate>
</asp:TemplateField>

ASP.NET 

protected void ViewADTBP_Click(object sender, EventArgs e)
{
    Button btn = (Button)sender;
    GridViewRow row = (GridViewRow)btn.NamingContainer;

    string measurement = row.Cells[1].Text;
    string chartdata = row.Cells[16].Text;

    if (measurement != "total")
    {
        SerializedBoxChart(measurement, chartdata);
    }
}

public void SerializedBoxChart(string measuredesc, string chartdata)
{
    string str = chartdata;
    string[] strList = str.Split(','); //seperate the hobbies by comma

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

    hiddenvariable.Value = dataStr;
    hiddenvariablemeasuredesc.Value = measuredesc;
}

JS: 

function CreateBoxPlot() {
    var hv = $('#hiddenvariable').val();
    console.log(hv);
    var hvmeasure = $('#hiddenvariablemeasuredesc').val();
    console.log(hvmeasure);

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

    var $container = $('<div>').appendTo(document.body);

    $(function () {
        $('#container').highcharts({
            chart: { type: type, inverted: true},
            title: { text: hvmeasure },
            subtitle: { text: subTitleText },
            renderTo: $container[0],
            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 });
    });
}
...