javascript искусство - Правильный способ удалить все данные серии из диаграммы высоких диаграмм?





визуализации бизнесе (6)


Это может быть просто вопрос, чтобы перерисовать диаграмму. Когда вы удаляете серию, попробуйте перерисовать диаграмму:

for (var i = 0; i < chart.series.length; i++) {
    chart.series[i].remove(true); //forces the chart to redraw
}

UPDATE: вот jsfiddle, который показывает проблему: http://jsfiddle.net/pynju/1/

Нажмите на синюю колонку в понедельник. Когда загружается подробный просмотр, обратите внимание, что 01-07 имеет 3 столбца (ожидается 2). Нажмите на самый высокий бар, чтобы вернуться к исходному виду. Обратите внимание, что метки на xAxis не удаляются.

===============

У меня есть гистограмма, которая имеет 2 серии, отображаемых в виде пар баров, бок о бок.

series: [{
         showInLegend: false,
         data: dowChartData
      },{
         showInLegend: false,
         data: avgUserDowChartData
      }],

,

dowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   {
                y: 98.74,
                color: '#0072ff',
                drilldown: {
                   name: 'Category Engagement - Sunday',
                   categories: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
                   data: [0,637,0,0,0,173,48.54,48.54,0,0,0,0,0,0,102.24,166.36,706.59,699.18,298.32,184.14,97.08,1539,0,1224.56],
                   color: '#0072ff',
                   data2: [506.80686467275,354.56354558498,333.25158689567,234.19283190879,234.82132336088,220.03247578171,222.86420797556,218.14034615202,170.42559544164,171.54776353196,249.24788461442,345.14915669555,206.65543589797,243.38811965637,367.02593304906,378.83677778129,467.45739743621,424.26264387522,639.60922934374,679.71299714907,373.26353846375,480.94380626458,551.82326068362,466.77469230724],
                   color2: '#C00'
                }
             }
AND SIMILAR

,

avgUserDowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         {
                y: 142.35,
                color: '#C00'
             },
AND SIMILAR

Исходными данными являются данные дня недели с осью X: воскресенье - понедельник - вторник - ср. - четверг - пт - суббота

Начальная серия имеет элемент детализации с новыми данными и данными2 (см. Выше)

Используя демонстрационный код drilldown в качестве примера, у меня есть этот код:

column: {
              borderWidth: 0,
            cursor: 'pointer',
            point: {
               events: {
                  click: function(event) {
                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down
                        setChart(dowChart, drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.data2, drilldown.color2);
                     } else { // restore
                        setChart(dowChart, '', dowCategories, dowChartData);
                     }
                  }
               }
            },

Установите обработчик диаграммы:

function setChart(chart, name, categories, data, color, data2, color2) {
      chart.xAxis[0].setCategories(categories);
//      chart.series[0].remove();
      for (var i = 0; i < chart.series.length; i++) {
          chart.series[i].remove();
      }
      chart.addSeries({
         showInLegend: false,
         name: name,
         data: data,
         color: color || 'white'
      });
      if (typeof(data2) != undefined && data2.length > 0) {
          chart.addSeries({
             showInLegend: false,
             name: name,
             data: data2,
             color: color2 || 'white'
          });
      }
   }

Начальная диаграмма отображается отлично:

Когда вы нажимаете на любую из синих полос (набор данных, который имеет развертку), все становится неустойчивым для первых 7 элементов оси x:

Как будто начальные наборы данных не удаляются кодом:

for (var i = 0; i < chart.series.length; i++) {
          chart.series[i].remove();
      }

Когда вы нажимаете на любую из баров с целью возврата к исходному набору / серии данных:

Итак ... ясно, что код удаляемого кода, который я использую, не работает. Каков наилучший способ полностью удалить данные на диаграмме и 2 серии, которые мне нужно отображать каждый раз в зависимости от того, что нажал?




попробуйте это, чтобы удалить все серии диаграмм,

while(chart.series.length > 0)
    chart.series[0].remove(true);

меня устраивает. код

for (var i = 0; i < chart.series.length; i++)

не будет работать, потому что chart.series.length уменьшается при каждом chart.series.length remove() . Таким образом, i никогда не достигнет ожидаемой длины. Надеюсь это поможет.




Следующим образом диаграмма не будет перерисовывать каждую итерацию.
Таким образом, вы получите лучшую производительность.

while( chart.series.length > 0 ) {
    chart.series[0].remove( false );
}

chart.redraw();



Другой способ удалить все серии в HighCharts с циклом for - это начать с конца. Вот как это сделать:

var seriesLength = chart.series.length;
for(var i = seriesLength - 1; i > -1; i--) {
    chart.series[i].remove();
}

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

var seriesLength = chart.series.length;
var navigator;
for(var i = seriesLength - 1; i > -1; i--) {
    if(chart.series[i].name.toLowerCase() == 'navigator') {
        navigator = chart.series[i];
    } else {
        chart.series[i].remove();
    }
}

Теперь я могу легко установить навигационную серию.

Ниже приведен пример удаления всех серий из Highchart: http://jsfiddle.net/engemasa/srZU2/

Ниже приведен пример сброса диаграммы HighStock с новыми данными (включая серию навигаторов): http://jsfiddle.net/engemasa/WcLQc/




Я нашел рабочее решение. Попробуй это:

for (var i = 0; i < chart.series.length; i++) {
   chart.series[0].remove();
}
chart.redraw();

Он полностью удалит все серии.




Элементы управления диаграммой основаны на ранее отдельном проекте MS Chart.

Блог Алекса Горева (ведущий разработчик MSFT для проекта): http://blogs.msdn.com/b/alexgor/

Форумы MS Chart: http://social.msdn.microsoft.com/Forums/en-US/MSWinWebChart/

Документация по MSDN: http://msdn.microsoft.com/en-us/library/dd456632(VS.100).aspx

Посты кажутся немного устаревшими, но API практически одинаков между MS Chart и новыми библиотеками визуализации данных.

Для решения ваших примеров вопросов:

1) Для отображения надписей вне диаграммы каждый объект Series имеет массив свойств словаря.

series["PieLabelStyle"] = "Outside";

2) Чтобы указать проценты, а не необработанные значения, свойство Label объекта Series принимает строку форматирования.

series.Label = "#PERCENT{P0}"

Эти настраиваемые атрибуты доступны подробно на http://msdn.microsoft.com/en-us/library/dd456764.aspx .

РЕДАКТИРОВАТЬ: Пример добавления кода

Хорошо, вот полный пример кода. Я использую System.Web.DataVisualization v4.0.0.0, так что это должно быть актуально для MVC 3. Перечисленные выше series не являются фактическими свойствами Chart.Series (это SeriesCollection ). Это отдельная series , которую вы добавляете в эту коллекцию.

public ActionResult TestForSOExample()
{
  // slug in some data
  var data = new Dictionary<string, float>
        {
            {"test", 10.023f},
            {"test2", 20.020f},
            {"test3", 19.203f},
            {"test4", 4.039f},
            {"test5", 5.343f}
    };


  var chart = new Chart();

  var area = new ChartArea();
  // configure your chart area (dimensions, etc) here.
  chart.ChartAreas.Add(area);

  // create and customize your data series.
  var series = new Series();
  foreach (var item in data)
  {
        series.Points.AddXY(item.Key, item.Value);
    }
  series.Label = "#PERCENT{P0}";
  series.Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
  series.ChartType = SeriesChartType.Pie;
  series["PieLabelStyle"] = "Outside";

  chart.Series.Add(series);

  var returnStream = new MemoryStream();
  chart.ImageType = ChartImageType.Png;
  chart.SaveImage(returnStream);
  returnStream.Position = 0;
  return new FileStreamResult(returnStream, "image/png");
}

Когда вы вызываете действие контроллера, вы видите следующие изображения.





javascript charts highcharts