深入分析内部的三维 highcharts 多个系列

fdx2calv 于 2022-12-23 发布在 Highcharts

关注(0)|答案(2)|浏览(190)

我有一个非常大的问题，在 highcharts 有多个系列使用钻取下来，也同时点击返回按钮
这是我使用的js函数，我可以在向下钻取时创建多个系列，但在返回时，以前的数据将与当前数据合并

function hello() {

            var odata = [{
                name: 'Jan',
                y: 50,
                drilldown: 'animals'
            },
            {
                name: 'Feb',
                y: 52,
                drilldown: 'animals'
            }

            ];

            $('#container').highcharts({
                chart: {
                    type: 'column',
                    margin: 75,
                    options3d: {
                        enabled: true,
                        alpha: 15,
                        beta: 15,
                        depth: 50,
                        viewDistance: 25
                    }
                },
                title: {
                    text: 'Employee Leave status, 2013.'
                },
                subtitle: {
                    text: 'Click the columns to view more.'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: 'Total Number'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y}'
                        }
                    }
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> Number of days<br/>'
                },
                series: [{
                    name: 'UN Over-All for year',

                    colorByPoint: true,
                    data: odata
                },
                {
                name: 'Pl Over-All for year',
                colorByPoint: true,
                data: odata 
                }],

                drilldown: {
                    series: [{
                        id: 'animals',
                        name: 'Animals',
                        data: [{
                            name: 'Cats',
                            y: 4,
                            drilldown: 'cats'
                        }, ['Dogs', 2],
                ['Cows', 1],
                ['Sheep', 2],
                ['Pigs', 1]
            ]
                    },{

                        id: 'cats',
                        data: [1, 2, 3]
                    }]
                }



            })

        }

我需要在每个深入查看时有多个系列，而且我也有多个唐斯
这是小提琴
http://jsfiddle.net/mohamedmusthafac/x5E2Y/1/
只需点击jan-〉然后任何一个酒吧-〉然后点击返回-〉然后点击同一对的另一个酒吧-〉错误（系列碰撞）

highcharts

来源：https://stackoverflow.com/questions/24909498/3d-high-charts-multiple-series-inside-of-drilldown

2条答案

按热度按时间

s6fujrry1#

此问题已在Highcharts v4.1.4中得到修复。

赞(0）回复(0）举报 2022-12-23

7gcisfzg2#

// you should have Barchart component 

import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";
import HC_ExportData from "highcharts/modules/export-data";
import HC_Exporting from "highcharts/modules/exporting";
import HC_ExportingOffline from "highcharts/modules/offline-exporting";
import HC_More from "highcharts/highcharts-more";

const BarChart = ({
  title,
  subtitle,
  data,
  Xtitle,
  Ytitle,
  plotLines
}) => {
  HC_Exporting(Highcharts);
  HC_ExportingOffline(Highcharts);
  HC_ExportData(Highcharts);
  HC_More(Highcharts);

  // configChart
  const chartOptions = {
    chart: {
      height: 500,
      type: "column",
    },
    title: {
      text: title,
    },
    subtitle: {
      text: subtitle,
    },
    plotOptions: {
      series: {
        allowPointSelect: true,
        marker: {
          enabled: true,
        },
        dataLabels: {
          enabled: true,
          color: "blue",
          crop: false,
          overflow: "none",
        },
      },
      column: {
        // stacking: 'percent',
        // stacking: 'normal',
        grouping: true,
        shadow: true,
        borderRadius: 5,
        // borderWidth: 0
      },
    },
    series: data ? .series,
    xAxis: {
      title: {
        text: Xtitle,
      },
      categories: data ? .category,
      crosshair: true,
    },
    yAxis: {
      title: {
        text: Ytitle
      },
      plotLines: plotLines,
    },
    legend: {
      rtl: false,
    },
    credits: {
      enabled: false,
    },
    exporting: {
      allowHTML: true,
      csv: {
        fallbackToExportServer: false,
        // useMultiLevelHeaders: true,

        columnHeaderFormatter: function(series) {
          if (series.name !== "DateTime" && series.name !== undefined && Ytitle) {
            return Ytitle + "(" + series.name + ")";
          }
          return false;
        },
        dateFormat: "%Y-%m-%d %H:%M:%S",
      },
      chartOptions: {
        // specific options for the exported image
        plotOptions: {
          series: {
            dataLabels: {
              enabled: true,
            },
          },
        },

        menuItemDefinitions: {
          // Custom definition
          label: {
            onclick: function() {
              this.renderer
                .label("You just clicked a custom menu item", 100, 100)
                .attr({
                  fill: "#a4edba",
                  r: 5,
                  padding: 10,
                  zIndex: 10,
                })
                .css({
                  fontSize: "1.5em",
                })
                .add();
            },
            text: "Show label",
          },
        },
      },
      buttons: {
        contextButton: {
          menuItems: [
            "viewFullscreen",
            "printChart",
            "separator",
            "downloadPDF",
            // "downloadPNG",
            "downloadJPEG",
            // "downloadSVG",
            "downloadCSV",
            // "viewData",
          ],
        },
      },

      fallbackToExportServer: false,
    },

    responsive: {
      rules: [{
        condition: {
          maxWidth: 500,
        },
        chartOptions: {
          legend: {
            layout: "horizontal",
            align: "center",
            verticalAlign: "bottom",
          },
        },
      }, ],
    },
  };

  return ( <
    div className = "ltr chart-container" >
    <
    HighchartsReact highcharts = {
      Highcharts
    }
    options = {
      chartOptions
    }
    immutable = {
      false
    }
    /> <
    /div>
  );
};

export default BarChart;

// and in parent component call it 

const ChartData = {
  category: cat,
  series: [{
      name: name1,
      data: firstData,
    },
    {
      name: name2,
      data: secondData,
    },
  ],
};

<
BarChart
data = ChartData

  /
  >

赞(0）回复(0）举报 2022-12-23

我来回答

深入分析内部的三维 highcharts 多个系列

2条答案

相关问题

热门标签

最新问答