单击柱形图后,在饼图中获取数据

时间:2017-10-05 12:51:14

标签: javascript jquery html highcharts

我一直在制作图表,我的要求是当我点击列时我想以饼图格式显示数据。最初它的工作良好意味着我在柱形图中获得静态数据,但我想在饼图中显示像圆圈一样的数据。我将放置以列格式工作的代码。但我希望它以饼状格式。最初列应该是列格式,当我点击列数据时,应该以饼图格式显示 提前致谢

     <script src="https://code.highcharts.com/highcharts.js"></script>
     <script src="https://code.highcharts.com/modules/drilldown.js"></script>

            <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

        <script>
        // Create the chart
        Highcharts.chart('container', {
          chart: {
            type: 'column'
          },
          title: {
            text: 'Basic drilldown'
          },
          xAxis: {
            type: 'category'
          },

          legend: {
            enabled: false
          },

          plotOptions: {
            series: {
              borderWidth: 0,
              dataLabels: {
                enabled: true
              }
            }
          },

          series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
              name: 'Animals',
              y: 5,
              drilldown: 'animals'
            }, {
              name: 'Fruits',
              y: 2,
              drilldown: 'fruits'
            }, {
              name: 'Cars',
              y: 4,
              drilldown: 'cars'
            }]
          }],
          drilldown: {
            series: [{
              id: 'animals',
              data: [{
                  name: 'Mammals',
                  y: 4,
                  drilldown: 'mammals'
                },
                ['Reptiles', 2],
                ['Vertebrates', 1]
              ]
            },

            // trying to get data in pie chart after click on any of the column
        Highcharts.chart('container', {
              chart: {
            type: 'pie'
          },
          title: {
            text: 'Basic drilldown'
          },
          xAxis: {
            type: 'category'
          },

          legend: {
            enabled: false
          },

          plotOptions: {
            series: {
              borderWidth: 0,
              dataLabels: {
                enabled: true
              }
            }
          },

              id: 'mammals',
              data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]   
         {
              id: 'mammals',
              data: [{
                  name: 'cats',
                  y: 4,
                  drilldown: 'cats'
                },
                ['one', 2],
                ['two', 1]
              ]
            },

                // third drill down
            {
              id: 'cats',
              data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
            },{
              id: 'fruits',
              data: [
                ['Apples', 4],
                ['Oranges', 2]
              ]
            }, 
            },

            // end 
        {
              id: 'cars',
              data: [
                ['Toyota', 4],
                ['Opel', 2],
                ['Volkswagen', 2]
              ]
            }]
          }
        });
        </script>
// working good in column format
<script>
// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Basic drilldown'
  },
  xAxis: {
    type: 'category'
  },

  legend: {
    enabled: false
  },

  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true
      }
    }
  },

  series: [{
    name: 'Things',
    colorByPoint: true,
    data: [{
      name: 'Animals',
      y: 5,
      drilldown: 'animals'
    }, {
      name: 'Fruits',
      y: 2,
      drilldown: 'fruits'
    }, {
      name: 'Cars',
      y: 4,
      drilldown: 'cars'
    }]
  }],
  drilldown: {
    series: [{
      id: 'animals',
      data: [{
          name: 'Mammals',
          y: 4,
          drilldown: 'mammals'
        },
        ['Reptiles', 2],
        ['Vertebrates', 1]
      ]
    },

    // second drill down
    {
      id: 'mammals',
      data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]   
    }, {
      id: 'mammals',
      data: [{
          name: 'cats',
          y: 4,
          drilldown: 'cats'
        },
        ['one', 2],
        ['two', 1]
      ]
    },
    // third drill down
    {
      id: 'cats',
      data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
    },{
      id: 'fruits',
      data: [
        ['Apples', 4],
        ['Oranges', 2]
      ]
    }, {
      id: 'cars',
      data: [
        ['Toyota', 4],
        ['Opel', 2],
        ['Volkswagen', 2]
      ]
    }]
  }
});
</script>

0 个答案:

没有答案