Блог

Я создаю компонент Razor для инкапсуляции Chart.js . Исходный код находится на GitHub.

На данный момент я создаю красивую диаграмму, но проблема, с которой я сталкиваюсь, связана с обратным вызовом. Создать новую диаграмму довольно просто. На странице я добавляю компонент

 <Chart Config="_config1" @ref="_chart1" Id="@Id1"></Chart>
 

и в коде я добавляю конфигурацию для гистограммы. Объект BarChartConfig преобразуется в a json для создания диаграммы.

 _config1 = new BarChartConfig()
{
    CanvasId = Id1,
    Type = ChartType.Bar,
    Options = new Options()
    {
        Plugins = new Plugins()
        {
            Legend = new Legend()
            {
                Align = LegendAlign.Center,
                Display = false,
                Position = LegendPosition.Right
            }
        },
        Scales = new Scales()
        {
            X = new XAxes()
            {
                Stacked = true,
                Ticks = new Ticks()
                {
                    MaxRotation = 0,
                    MinRotation = 0
                }
            },
            Y = new YAxes()
            {
                Stacked = true
            }
        }
    }
};
 

Что я пытаюсь сделать сейчас, так это добавить некоторый обратный вызов или функцию. Например, мне нравится добавлять пользовательскую функцию, подобную этой, в ticks часть.

 const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Chart with Tick Configuration'
      }
    },
    scales: {
      x: {
        ticks: {
          // For a category axis, the val is the index so the lookup via getLabelForValue is needed
          callback: function(val, index) {
            // Hide every 2nd tick label
            return index % 2 === 0 ? this.getLabelForValue(val) : '';
          },
          color: 'red',
        }
      }
    }
  },
};
 

Я почти уверен, что могу JSInterop каким-то образом добиться этого, но я не знаю как.

Например, как я могу привязать / добавить функцию JavaScript во время выполнения?

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