8

jqueryを使ってグラフの種類を切り替えようとしています。

関数を使用して、（新しいチャートを再作成せずに）チャートタイプを動的に変更する方法を見つけました：

series[i].update({ type: chartType});

私の最初の質問は次のとおりです。シリーズだけでなく、すべてのチャートを変更する方法はありますか? そうでない場合は、読み続けてください:)

しかし、この機能では、「棒」グラフを機能させることができません。縦棒グラフのように機能します。ご覧のとおり、パイの例は例外として機能しています。

バー: http://www.highcharts.com/demo/bar-basic

仕組み（サンプル例）：

<div id="top10_" style="float:left">
    <button id="set_column">column</button>
    <button id="set_bar">bar</button>
    <button id="set_pie">pie</button>
</div>
<div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>

$('#set_column').click(function () {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_', '');
    $('#' + chart).highcharts().series[0].update({
        type: "column"
    });
});
$('#set_bar').click(function () {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_', '');
    $('#' + chart).highcharts().series[0].update({
        type: "bar"
    });
});
$('#set_pie').click(function () {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_', '');
    $('#' + chart).highcharts().series[0].update({
        type: "pie"
    });
});

ハイチャートの作成 :

$('#top10').highcharts({
    chart: {
        type: 'column',
        margin: [50, 50, 100, 80]
    },
    title: {
        text: 'TOP10'
    },
    subtitle: {
        text: ' '
    },
    credits: {
        enabled: false
    },
    xAxis: {
        categories: ['1', '2', '3', '4'],
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Ilość'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' + 'Ilość: ' + this.y;
        }
    },
    series: [{
        name: 'Ilość zgłoszeń, TOP10',
        data: [1, 2, 3, 43],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            x: 4,
            y: 10,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});

ここにフィドルの例があります: http://jsfiddle.net/supergg/zqvNq/4/

ありがとう、

4

5 に答える 5

3

これは私のために働く：

$.each(chart.series, function (key, series) {
    series.update(
        {type: 'bar'},
        false
    );
}
于 2015-12-04T20:05:39.787 に答える
0

ここで私のために働くもの：

function changeType() {
  var series  = chart.series[0];
  var newType = your_condition_here ? 'column' : 'bar';
  var dataArray = [],
      points = series.data;

  series.chart.addSeries({
      type: newType,
      name: series.name,
      color: series.color,
      data: series.options.data
  }, false);
  series.remove();
}

新しいタイプを使用して新しいシリーズを作成し、古いシリーズを削除します。

必要に応じてオプションを自由に追加できます。

それが誰かを助けることを願っています:)

于 2019-06-24T02:34:51.377 に答える
0

チャートのレベルでチャート タイプを更新できます。チャート属性内にタイプを設定したため、同じ属性を更新する必要があります。

// Initializing Chart
let probChart = new Highcharts.Chart('container', {
  chart: { 
    type: "line"
  },
});

// Updating Chart Type
probChart.update({
  chart: { type: "column" }
});
于 2021-08-05T16:04:07.207 に答える
-2

まだ答えが見つかるかどうかはわかりませんが、将来の参照用としても 101% 役立つリンクが 1 つ見つかりました。では、よろしければご覧ください。私は何か他のものを探していましたが、このリンクを見つけて、あなたの質問も受け取りました。

   [http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-update/][1]

これが何らかの形で役立つ場合は、私の答えを知らせるか、受け入れてください。乾杯：）

于 2015-07-30T06:00:32.150 に答える